ArkTS條件渲染案例

 

 

/**
 * 條件渲染案例
 */

@Component
struct MyChild {
  // @State counter: number = 0
  @Link counter: number
  label: string

  build() {
    Row(){
      Text(`${this.label}`)
        .width(100)
        .height(100)
        .fontSize(20)

      Button(`計數器的值：${this.counter}`)
        .width(200)
        .height(60)
        .onClick(()=>{
          this.counter += 1
        })
    }
  }
}

@Entry
@Component
struct MyParent {
  @State flag:boolean = true
  @State parentCount: number = 0
  build() {
    Column() {
      // 根據判斷，來決定子組件
      if (this.flag) {
        MyChild({counter: $parentCount, label: '真真'})
      } else {
        MyChild({counter: $parentCount, label: '假假'})
      }

      Divider()

      Button(`是否真假：${this.flag}`)
        .width(300)
        .height(60)
        .fontSize(30)
        .margin(40)
        .onClick(()=>{
          this.flag = !this.flag
        })
    }
  }
}