一、条件渲染 if/else

先上代码：

@Entry
@Component
struct IfRender{
  @State isShowImg: boolean = false
  build() {
    Column({space:20}){
      //通过条件语句控制组件的渲染
      if (this.isShowImg) {
        Image($r('app.media.startIcon'))
          .width(100)
          .height(100)
          .backgroundColor(Color.Orange)
      } else {
        Text('Hello world...')
          .fontSize(20)
          .fontColor(Color.White)
          .backgroundColor(Color.Green)
      }
      Button(this.isShowImg ? '显示文本' : '显示图片')
        .backgroundColor(Color.Orange)
        .fontColor(Color.White)
        .onClick(()=>{
          this.isShowImg = !this.isShowImg
        })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

示例图如下：

特别注意：条件渲染只能放在容器组件中使用！！！

二、ForEach循环渲染

ForEach的定义如下：

interface ForEach {(
    arr: Array<any>, 
    itemGenerator: (item: any, index?: number) => void,
  keyGenerator?: (item: any, index?: number) => string
  ): ForEach;
}

• arr：表示一个数组
• itemGenerator：是一个lamdba表达式，用于在循环时根据item参数生成指定的组件

使用示例：

@Entry
@Component
struct ForRender{
  private languages: string[] = ['Java','C语言','Python','C#','Golang','Kotlin']
  build() {
    Column({space:20}) {
      ForEach(this.languages,(item:String,index?:number) => {
        Text(`编程语言：${item}`)
          .backgroundColor(Color.Red)
          .fontColor(Color.Yellow)
          .fontSize(18)
          .margin({top:20})
          .padding(10)
      })
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}

运行结果如下图：

三、LazyForEach循环渲染