仓颉应用开发之——自定义组件(3)

发表于 分类于 ， ， 阅读时长 ≈ 1 分钟

一 概述

  • 自定义组件极其特点
  • 自定义组件
  • 使用自定义组件

二 自定义组件极其特点

2.1 系统组件和自定义组件

  • 系统组件：由框架直接提供的组件，比如(Text、Button)
  • 自定义组件：开发者定义的组件，比如TabBar标题栏

2.2 自定义组件特点

  • 可组合：允许开发者组合使用系统组件、及其属性和方法。
  • 可重用：自定义组件可以被其他组件重用，并作为不同的实例在不同的父组件或容器中使用
  • 数据驱动UI更新：通过状态变量的改变，来驱动UI的刷新

三 自定义组件

3.1 自定义组件步骤

  • public class+自定义组件名(HelloComponent)
  • 使用@Component声明自定义组件(@Entry是入口修饰符，非必须)
  • func build()方法中构建自定义组件页面

3.2 示例(一个按钮，点击修改按钮内容)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@Entry
@Component
public class HelloComponent {

 @State var message: String = 'Hello, World!';

    func build(){
        Row(){
            Button(this.message).onClick{ =>
                    this.message = "Hello, Cangjie!"
            }
        }
        .padding(left: 35, right: 35, top: 35)
    }
}

四 使用自定义组件

4.1 导入自定义组件

图示

代码(ohos_app_cangjie_entry对应src目录)

1
import ohos_app_cangjie_entry.pages.HelloComponent

4.2 使用自定义组件

1
2
3
4
5
6
7
8
9
@Entry
@Component
class MyView {
    func build() {
          Column(20) {
            HelloComponent()
        }
    }
}

4.3 效果图

五 参考

  • HarmonyOS Beta5 仓颉—自定义组件
  • HarmonyOS Beta5 ArkTS-自定义组件