学习笔记（三）：自定义组件

自定义组件基于struct实现，

1、struct:

struct + 自定义组件名 + {...}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。

2、@Component：

@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。

3、build()函数：

build()函数用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。

4、@Entry：

@Entry装饰的自定义组件将作为UI页面的入口。

5、export:

如果在另外的文件中引用该自定义组件，需要使用export关键字导出，并在使用的页面import该自定义组件。

注意：自定义组件的名称不能和系统组件名称相同

示例：

1、定义一个自定义组件

// 自定义文本组件
// 传入一个字符串，点击组件 字符串发生变化
@Component
export struct mText {
  @State message: string = 'Hello World'

  build() {
    Row() {
      Text(this.message)
        .fontSize(20)
        .fontColor(Color.Red)
        .onClick(()=>{
          this.message = "点击了一下"
        })
    }
  }
}

2、使用自定义组件

import { mText } from './component/mText'

@Entry
@Component
struct Index {
  build() {
    Row() {
      Column() {
        mText({message: '第一个自定义组件' });
        Divider()
        mText({message: '第二个自定义组件'})
      }
      .width('100%')
    }
    .height('100%')
  }
}

 

成员函数/变量

自定义组件的成员函数为私有的，且不建议声明成静态函数

自定义组件的成员变量为私有的，且不建议声明成静态变量。

自定义组件的成员变量本地初始化有些是可选的，有些是必选的。具体是否需要本地初始化，是否需要从父组件通过参数传递初始化子组件的成员变量

自定义组件的参数规定

可以在build方法里创建自定义组件，在创建自定义组件的过程中，根据装饰器的规则来初始化自定义组件的参数。

@Component
export struct mText {
  @State message: string = 'Hello World'

  build() {
    Row() {
      // todo
    }
  }
}

使用:
import { mText } from './component/mText'

mText({message: '第一个自定义组件' });