鸿蒙UI开发快速入门 —— part04: 组件的UI逻辑复用

1、为什么要复用？

从鸿蒙UI开发快速入门 —— part02: 组件开发文章中我们学习到，build()函数是我们构建用户UI界面的入口函数，在该函数中完成UI样式定义以及事件定义。

实际的项目开发中，一个组件的UI可能是相对比较复杂的（代码量比较多），如果把所有的UI描述代码都写在build()函数中，那维护起来真的会让人崩溃。

因此，合理的将build()函数中的逻辑抽离一部分到其他函数，那代码将变得更易理解，更易维护。

2、哪些可以复用？

在实际的UI开发中，一般可被复用的分为两个类型：1）组件的组合结构；2）组件的特定样式；

• 组件的组合结构

组件的组合结构比较容易理解，类似于HTML中的DOM树结构，它表示的是组件的层级包含关系。

针对组件的组合结构，鸿蒙提供了有两个复用方式，分别是：@Builder装饰器、@BuilderParam装饰器。

• 组件的特定样式

组件的样式复用也是字面意思，即：将公用的一些样式定义抽离出来，多个组件使用同一套样式。鸿蒙也提供了两个复用方式，分别是：@Styles装饰器、@Extend装饰器。

下面将展开说明这几个装饰器的使用。

3、 @Builder装饰器

先上demo，下面的overBuilder()展示了使用方式。

@Entry@Componentstruct Parent {
    @State label: string = 'Hello';  // overBuilder方法被@Builder装饰器装饰  @Builder function overBuilder(paramA1: string) {
      Row() {
        Text(`UseStateVarByValue: ${paramA1} `)    }  }  build() {
      Column() {
        // 这里调用了装饰器方法      this.overB