03-鸿蒙4.0学习之自定义组件构建函数

03鸿蒙4.0学习之自定义组件构建函数

内部：

/**
 * 自定义组件构建函数
 */
@Entry
@Component
struct BuilderUI {
  @State message: string = '@Builder'
  @State isDone:boolean = false
  @Builder item(content:string) {
    // 必须有一个根组件
    Row() {
      Image(this.isDone ? $r('app.media.todo_ok') : $r('app.media.todo_default'))
        .width(20)
        .height(20)
        .margin(15)
      Text(content)
        .decoration({
          type: this.isDone ? TextDecorationType.LineThrough : TextDecorationType.None
        })
    }
    .width('98%')
    .backgroundColor(Color.Pink)
    .borderRadius(25)
    .margin({
      top: 5
    })
    .onClick(()=>{
      this.isDone = !this.isDone
    })
  }
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        this.item('劝君更尽一杯酒，西出阳关无故人')
      }
      .width('100%')
    }
    .height('100%')
  }
}

// 写在外面的自定义组件构建函数 方便多组件共同调用 // 必须使用关键字 function 使用的时候 不能加this
// @Builder function item(content:string){}