鸿蒙UI开发快速入门 —— part02: 组件开发

1. 组件基本介绍

在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。

自定义组件具有以下特点:

  • 可组合:允许开发者组合使用系统组件、及其属性和方法。

  • 可重用:自定义组件可以被其他组件重用,并作为不同的实例在不同的父组件或容器中使用。

  • 数据驱动UI更新:通过状态变量的改变,来驱动UI的刷新。

以下示例展示了开发一个组件的基本用法。

@Componentexport struct HelloComponent {
    @State message: string = 'Hello, World!';  build() {
      // HelloComponent自定义组件组合系统组件Row和Text    Row() {
        Text(this.message)        .onClick(() => {
            // 状态变量message的改变驱动UI刷新,UI从'Hello, World!'刷新为'Hello, ArkUI!'          this.message = 'Hello, ArkUI!';        })    }  }}

HelloComponent可以在其他自定义组件中的build()函数中多次创建,实现自定义组件的重用。​​​​​​​

@Entry@Componentstruct ParentComponent {
    build() {
      Column() {
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值