鸿蒙开发之ArkUI 界面篇 三十三 Builder(封装容器)

鸿蒙开发中遇到容器相同、容器下面的子组件相同，就是子组件的文字不同，背景颜色不同，文字颜色不同之类，就可以使用Builder来封装，语法格式如下：

例如下面的界面：

Row+4个Colum+Image+Text来实现，发现呢？出来背景图和文字不同其他都是一样的，所以就可以把一样的抽取到一个方法里面，变的作为参数传递，代码如下：

// 全局 Builder
@Builder
function navItem(icon: ResourceStr, txt: string) {
  Column({ space: 10 }) {
    Image(icon)
      .width('80%')
    Text(txt)
  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: '点了' + txt
    })
  })
}


@Entry
@Component
struct BuilderDemo {
  @State message: string = '@Builder';

  @Builder
  navItem(icon: ResourceStr, txt: string) {
    Column({ space: 10 }) {
      Image(icon)
        .width('80%')
      Text(txt)
    }
    .width('25%')
    .onClick(() => {
      AlertDialog.show({
        message: '点了' + txt + this.message
      })
    })
  }

  build() {
    Column({ space: 20 }) {
      Text(this.message)
        .fontSize(30)

      Row() {
        Row() {
          navItem($r('app.media.ic_reuse_01'), '阿里拍卖')
          navItem($r('app.media.ic_reuse_02'), '菜鸟')
          this.navItem($r('app.media.ic_reuse_03'), '巴巴农场')
          this.navItem($r('app.media.ic_reuse_04'), '阿里药房')
        }
      }
    }
    .width('100%')
    .height('100%')
  }

}

总结：鸿蒙组价的封封装提供了三种实现分别是Extend、Styles、Builder，Extend需要指定具体的组件类型，支持参数，Styles更通用，不需要具体类型，不支持参数，Builder是界面构建层面的封装，支持参数，通用的代码包括Row和Colum和组件都封装在函数里

原文地址：https://blog.csdn.net/renfujiang/article/details/142882433

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！