ArkTs基础语法-声明式UI-自定义组件

最新推荐文章于 2025-04-28 18:55:42 发布

gitzzp

最新推荐文章于 2025-04-28 18:55:42 发布

阅读量591

点赞数 4

分类专栏：鸿蒙Next 文章标签： ui 鸿蒙

本文链接：https://blog.csdn.net/gitzzp/article/details/141233198

版权

这里写目录标题

自定义组件
- 创建自定义组件

自定义组件

创建自定义组件

自定义组件的基本用法

@Component
export struct MyComponent {
  @State message: string = '我是自定义组件';

  build() {
    Row() {
      Text(this.message)
        .onClick(() => {
          this.message = '点击刷新UI';
        })
    }
  }
}

自定义组件的基本结构

struct：自定义组件基于struct实现，不能有继承关系，对于struct的实例化，可以省略new关键字。
@Component：@Component装饰器仅能装饰struct关键字声明的数据结构，struct被@Component装饰后具备组件化的能力，一个struct只能被一个@Component装饰。
build()函数：用于定义自定义组件的声明式UI描述，自定义组件必须定义build()函数。
@Entry：@Entry装饰的自定义组件可以作为UI页面的入口，在单个页面UI中，最多可以使用一个@Entry装饰一个自定义组件。
@State：状态变量使用@State装饰器修饰，该变量的变化，会触发组件UI重绘。