鸿蒙开发-7【原来这就是鸿蒙的组件方法】

一个医学生转行的前端程序猿
如果你觉得文章对你有帮助，欢迎赞赏

内容目录

创建组件有参数组件
无参数组件
属性方法
事件方法

创建组件

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

注意：创建组件时不需要new运算符。

有参数组件

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

Image("URL")

对于Image标签，有三种展现形式

加载远程图片。直接在Image的src参数中添加远程图片地址就可以。但是需要在./PROJECT_PATH/entry/src/main/moudule.json5添加权限。

PS：需要在真机调试中才能看出效果
```
"requestPermissions": [
  {
    "name": "ohos.permission.INTERNET"
  }
]
```

图片来自互联网，如有侵权请第一时间联系小编

2. 加载./PROJECT_PATH/entry/src/main/resources/base/media中图片

Image($r("app.media.FILENAME")) // FILENAME为文件名

3. 加载./PROJECT_PATH/entry/src/main/resources/rawfile中图片

Image($rawfile("FILENAME.png")) // FILENAME为文件名

无参数组件

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

Column() {
  Text('item 1')
  Divider()
  Text('item 2')
}

有些小伙伴可能会问小编，那我怎么知道哪些组件是有参数组件，哪些是无参数组件呢？小编为大家准备了两种方式

1. 在编辑器按住Ctrl / Command键点击组件，可以看到对应组件的源码，下面通过图片的方式展示Image和Text组件的实例

2. 通过官方文档查看组件的详情。官方文档地址：

https://developer.harmonyos.com/cn/documentation/overview/?catalogVersion=V3

属性方法

属性方法以“.”链式调用的方式配置系统组件的样式和其他属性，建议每个属性方法单独写一行。

配置Text组件的字体大小

Text('test')
  .fontSize(12)

配置组件的多个属性

Image('test.jpg')
  .alt('error.jpg')  
  .width(100)  
  .height(100)

除了直接传递常量参数外，还可以传递变量或表达式。

Text('hello')
  .fontSize(this.size)
Image('test.jpg')
  .width(this.count % 2 === 0 ? 100 : 200)  
  .height(this.offset + 100)
  .objectFit(ImageFit.Cover)

对于系统组件，ArkUI还为其属性预定义了一些枚举类型供开发者调用，枚举类型可以作为参数传递，但必须满足参数类型要求。

例如，可以按以下方式配置Text组件的颜色和字体样式。

Text('hello')
  .fontSize(20)
  .fontColor(Color.Red)
  .fontWeight(FontWeight.Bold)

事件方法

配置事件事件方法以“.”链式调用的方式配置系统组件支持的事件，建议每个事件方法单独写一行。事件函数常用箭头函数，也可以使用function关键字，在使用function关键字的时候，需要使用bind函数重定向一下this。

Column(){
  Text(this.myText)
    .fontSize(30)
  Button('Click me')
    .onClick(() => {
      this.myText = '你好世界';
    })
}

Column(){
  Text(this.counter+"")
    .fontSize(30)
    .margin({
      bottom:10
    })
  Button('add counter')
    .onClick(function(){
      this.counter += 2;
    }.bind(this))
}

配置子组件如果组件支持子组件配置，则需在尾随闭包”{…}”中为组件添加子组件的UI描述。

Column、Row、Stack、Grid、List等组件都是容器组件。以下是简单的Column组件配置子组件的示例。

Column() {
  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!');
      })
  }
}