ArkUI--循环渲染、条件渲染

1.ForEach：循环渲染

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

例如，ListItem组件要求ForEach的父容器组件必须为List组件。

ForEach( arr: Array, ////需要遍历的数据数组
   itemGenerator: (item: any, index?: number) => void, //组件生成函数
   keyGenerator?: (item: any, index?: number) => string //键值生成函数,如不指定，则框架默认的键值生成函数为(item: T, index: number) => { return index + '__' + JSON.stringify(item); }
)

我们先看一个简单的ForEach应用：

@Entry
@Component
struct Index {
  dataList: Array<string> = ['1111', '1111', '2222', '333', '444', '555'];

  build() {
    Column() {
      ForEach(this.dataList, (item: string, index: number) => {
        Text(`数据:${item},index:${index}`)
      }, (item: string, index: number) => `${index}(${item})`)
    }.width('100%')
  }
}

接下来，我们再看一个稍微复杂点的ForEach循环渲染：

@Entry
@Component
struct Index {
  newList: Array<New> = [{ url: 'https://www.itying.com/images/flutter/1.png', author: 'AA', title: '这是一个副标题' },
    { url: 'https://www.itying.com/images/flutter/2.png', author: 'BB', title: '这是一个副标题' },
    { url: 'https://www.itying.com/images/flutter/3.png', author: 'CC', title: '这是一个副标题' },
    { url: 'https://www.itying.com/images/flutter/4.png', author: 'DD', title: '这是一个副标题' },
    { url: 'https://www.itying.com/images/flutter/5.png', author: 'EE', title: '这是一个副标题' }]

  build() {
    Column() {

      ForEach(this.newList, (item: New) => {
        Row() {
          Image(item.url)
            .width(150)
          Column() {
            Text(item.author)
            Text(item.title)
          }.alignItems(HorizontalAlign.Start).margin({
            top: 10,
            left: 10
          })
        }.width('100%').padding({
          left:10,
          right:10
        }).alignItems(VerticalAlign.Top).margin({
          top:10
        })
      })
    }.width('100%')
  }
}

interface New {
  url: string,
  author: string,
  title: string,
}

通过ForEach，我们也能实现这样的图文列表。

2.if/else:条件渲染

ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

(1)使用if进行条件渲染

@Entry
@Component
struct Index {

  @State num:number = 0;
  
  build() {
    Column() {
      Text('-----')
      if(this.num>0) {
        Text('是个正值')
      }
      Text('-----')
      Row() {
        Button('+').width(100).height(50).onClick(()=>{
          this.num+=1
        })
        Button('-').width(100).height(50).onClick(()=>{
          this.num-=1
        })
      }.width('60%').justifyContent(FlexAlign.SpaceBetween)
    }.width('100%')
  }
}

当我们将num变为正数的时候，中间的Text将会被渲染，否则就不会被渲染。

(2)if..else语句

改造下上述的例子，加上个else语句：

@Entry
@Component
struct Index {

  @State num:number = 0;

  build() {
    Column() {
      Text('-----')
      if(this.num>0) {
        Text('是个正值')
      } else {
        Text('不是个正值')
      }
      Text('-----')
      Row() {
        Button('+').width(100).height(50).onClick(()=>{
          this.num+=1
        })
        Button('-').width(100).height(50).onClick(()=>{
          this.num-=1
        })
      }.width('60%').justifyContent(FlexAlign.SpaceBetween)
    }.width('100%')
  }
}

当我们将num变为非正数的时候，中间的Text也将会被渲染。

(3)if嵌套

@Entry
@Component
struct Index {

  isOn:boolean = true
  currentTemp:number = 28

  build() {
    Column() {
      if(this.isOn) {
        if(this.currentTemp>27) {
          Text('空调温度开得比较高')
        } else {
          Text('空调温度开得还行')
        }
      } else {
        Text('空调没开')
      }
    }.width('100%')
  }
}

最终渲染出'空调温度开得比较高'

至此，ForEach渲染和if/else条件渲染就简单学习啦！