@Builder全局与局部的用法

特点

适用于结构、样式、事件

类似于轻量型的自定义组件，但是没有状态（@state 之类的）

全局写法

@Builder
function navItem(icon: Resource, text: string) {
  Column() {
    Image(icon)
      .width(50)
    Text(text)
      .fontSize(20)
      .fontColor(Color.Red)
  }
  .width('25%')
  .onClick(() => {
    AlertDialog.show({
      message: '点击了：' + text
    })
  })
}

局部写法

  @Builder
  navItem(icon: Resource, text: string) {
    Column() {
      Image(icon)
        .width(50)
      Text(text)
        .fontSize(20)
        .fontColor(Color.Red)
    }
    .width('25%')
    .onClick(() => {
      AlertDialog.show({
        message: '点击了：' + text
      })
    })
  }

使用方法

  build() {
    Row() {
      //全局写法使用方法
      navItem($r('app.media.app_icon'), '首页')
      navItem($r('app.media.app_icon'), '课程')
      //局部写法使用方法
      this.navItem($r('app.media.app_icon'), '学习')
      this.navItem($r('app.media.app_icon'), '我的')
    }.width('100%')
  }

效果