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

1. 组件基本介绍

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

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

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

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

@Component
export 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
@Component
struct ParentComponent {
  build() {
    Column() {
      Text('ArkUI message')
      // 这里复用了组件
      HelloComponent({ message: 'Hello, World!' });
      Divider()
      // 这里再次复用了组件
      HelloComponent({ message: '你好!' });
    }
  }
}

渲染效果如下:

图片

一个自定义的UI组件一般有几个关键组成部分:

  1. struct声明组件名字(如果需要复用,则需要加上export 关键字导出);

  2. @Component 关键字装饰第1步创建的组件,表示当前的结构体是一个自定义组件;

  3. build()函数,该函数用于描述本组件需要渲染的样式;

  4. @State 装饰的本地变量,用于存储当前组件的内部状态;

  5. @Entry 关键字装饰,表示当前组件是UI页面的入口;

2. build()函数

build()函数是所有UI组件开发都需要实现的方法,它主要负责对UI的描述定义,build()函数需要遵循一些规则,如下所述:

  • @Entry 装饰的组件,其build()函数下的根节点唯一且必要,且必须为容器组件。

    @Components装饰的自定义组件,其build()函数下的根节点唯一且必要,可为非容器组件。两者中的ForEach禁止作为根节点。

  • build()函数不允许声明本地变量,下面为反例:

build() { 
    // 反例:不允许声明本地变量  
    let a: number = 1;
}

如果写了反例中的代码,编译期将报错,本地变量反例报错如下(后面的反例不再每个都贴图了):

图片

  • build()函数不允许在UI描述里直接使用console.info(),下面为反例:
build() {  
    // 反例:不允许console.info  
    console.info('print debug log');
}

  • build()函数里不允许创建本地的作用域,下面为反例:
build() {  
    // 反例:不允许本地作用域  
    {    
        ...  
    }
}

  • build函数里不允许调用没有用@Builder装饰的方法,允许系统组件的参数是TS方法的返回值。
@Component
struct ParentComponent {
  doSomeCalculations() {
  }

  calcTextValue(): string {
    return 'Hello World';
  }

  @Builder doSomeRender() {
    Text(`Hello World`)
  }

  build() {
    Column() {
      // 反例:不能调用没有用@Builder装饰的方法
      this.doSomeCalculations();
      // 正例:可以调用
      this.doSomeRender();
      // 正例:参数可以为调用TS方法的返回值
      Text(this.calcTextValue())
    }
  }
}回值      Text(this.calcTextValue())    }  }}

  • build()函数里不允许switch语法,如果需要使用条件判断,请使用if。
build() {
  Column() {
    // 反例:不允许使用switch语法
    switch (expression) {
      case 1:
        Text('...')
        break;
      case 2:
        Image('...')
        break;
      default:
        Text('...')
        break;
    }
  }
}

  • build()函数里不允许使用表达式
build() {
  Column() {
    // 反例:不允许使用表达式
    (this.aVar > 10) ? Text('...') : Image('...')
  }
}

3. 设置基本样式

所有的组件(不论是自定义组件还是系统组件),都可以设置一些通用样式,例如:宽度、高度、背景色、圆角等。设置方法均为 "." 号,示例代码如下:

@Component
struct MyComponent2 {
  build() {
    Button(`Hello World`)
  }
}

@Entry
@Component
struct MyComponent {
  build() {
    Row() {
      MyComponent2()
        .width(200)
        .height(300)
        .backgroundColor(Color.Red)
    }
  }
}


渲染效果如下:

图片

tips: ArkUI给自定义组件设置样式时,相当于给MyComponent2套了一个不可见的容器组件,而这些样式是设置在容器组件上的,而非直接设置给MyComponent2的Button组件。通过渲染结果我们可以很清楚的看到,背景颜色红色并没有直接生效在Button上,而是生效在Button所处的开发者不可见的容器组件上。

posted @   鸿蒙自习室  阅读(83)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示