鸿蒙4.0开发笔记之ArkTS语法基础的UI描述、基础组件的使用与如何查看组件是否有参数（八）

本文介绍: 在Harm on yOS的ArkTS语法中，万物皆组件。ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

在Harm on yOS的ArkTS语法中，万物皆组件。ArkTS以声明方式组合和扩展组件来描述应用程序的UI，同时还提供了基本的属性、事件和子组件配置方法，帮助开发者实现应用交互逻辑。根据组件构造方法的不同，创建组件包含有参数和无参数两种方式。

无参数组件：
如果组件的接口定义没有包含必选构造参数，则组件后面的“()”不需要配置任何内容。例如，Di v ide r组件不包含构造参数：

Column() {
  Text('HarmonyOS')
  Divider()
  Button('点我跳转')
}

有参数组件：
如果组件的接口定义包含构造参数，则在组件后面的“()”配置相应参数。例如 m a g e组件的必选参数src。

（1）方法一：
寻找官方文档：找到文档下面的“API参考”
1.1.1
在目录树下找到“组件参考”，然后找到“基础组件”，最后就可以看到如button这些基础组件的使用说明了。
1.1.2
（2）方法二：
按住Ctrl键，然后将鼠标移动到组件名上，会出现一个下划线，点击一下就能够进入组件的定义。
1.2.1
在组件的定义再用同样的方式（Ctrl+鼠标左键）进入接口的定义。
2.2.2
比如在接口的定义中就可以看到Text组件参数的设定：？表示可选参数，若要填参数则可以传递 string和resource 类型的参数。同样，在Divide r的接口函数中则可以看到不需要传递参数。
1.2.3

1、定义
Imag e为图片组件，常用于在应用中显示图片。Image 支持加载 string、Pi x elMap和Resource 类型的数据源，支持 png、jpg、bmp、svg和gif类型的图片格式。

//Image组件调用其他路径下的图片：必须加扩展名
        Image($rawfile('bg.jpg'))

Text('声明式UI组件').fontSize(50).fontColor(Color.Green).fontWeight(FontWeight.Bold)

//属性设置时做运算：偶数则将宽设置为200，奇数行则设置宽为300
 Image($rawfile('bg.jpg')).width(this.n%2 === 0 ? 200 : 300)

@State n: number = 7

//绑定事件，每点击一次就加1
        Text("财富：" + this.n + "W").fontSize(30)
        Button('点我++')
          .onClick(()=>{
            this.n++
          })

myClickHandler(): void {
  this.counter += 2;
}
...
Button('add counter')
  .onClick(this.myClickHandler.bind(this))

Column({space:50}) {
  Text('Hello')
    .fontSize(100)
  Divider()
  Text(this.myText)
    .fontSize(100)
    .fontColor(Color.Red)
}

Column() {
  Row() {
    Image('test1.jpg')
      .width(100)
      .height(100)
    Button('click +1')
      .onClick(() => {
        console.info('+1 clicked!');
      })
  }
}