当前位置：首页 > article >正文

鸿蒙4.0开发笔记之ArkTS语法基础之条件渲染和循环渲染的使用（十五）

article 2024/9/23 6:39:41

文章目录

- 一、条件渲染（if）
- 二、循环渲染（ForEach）

一、条件渲染（if）

1、定义
正如其他语言中的if…else…语句，ArkTS提供了渲染控制的能力，条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。
语法结构为：if(条件表达式/布尔值){ ... }else{ ... }

2、使用规则

（1）if、else if后跟随的条件语句可以使用状态变量。
（2）条件渲染语句在涉及到组件的父子关系时是“透明”的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。
（3）允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
（4）每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。

3、更新机制
当条件语句使用状态变量时且if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新，更新步骤如下：

评估if和else if的状态判断条件，如果分支没有变化，请无需执行以下步骤。如果分支有变化，则执行2、3步骤：
删除此前构建的所有子组件。
执行新分支的构造函数，将获取到的组件添加到if父容器中。如果缺少适用的else分支，则不构建任何内容。

二、循环渲染（ForEach）

1、定义
ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，作用就是***遍历每一个数据并用Text呈现在UI界面上。***语法结构如下：

ForEach(
	//数据源，为Array类型的数组。
  arr: Array,
	//组件生成函数
  itemGenerator: (item: any, index?: number) => void,
    //键值生成函数
  keyGenerator?: (item: any, index?: number): string => string
)

简答来说共有3个参数，第一个参数为需要遍历的数组，第二个参数为对每个遍历元素进行操作的函数，第三个参数为返回的每一个元素索引（唯一值，不能重复）。
详细参数介绍参考HarmonyOS的ArkTS语法官方文档：ForEach：循环渲染

2、键值生成规则

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数

3、ForEach案例一：遍历数组并依次呈现

@Entry
@Component
struct Index {
  @State message: string = '循环渲染'
  //创建一个景色数组
  @State scenery: Array<string> = ['江上','清风','山间','明月','造物者']

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()

        //使用ForEach渲染：遍历每一个数据并用Text呈现在UI界面上
        //第一个参数为需要遍历的数组，第二参数为对每个遍历元素进行操作的函数，第三参数为返回的每一个元素索引（唯一值）
        ForEach(this.scenery,(item1)=>{
          Text(item1)
            .fontSize(30)
            .fontStyle(FontStyle.Italic)
        },(item2)=>{
          return item2
        })

      }
      .width('100%')
    }
    .height('100%')
  }
}

4、ForEach案例二：遍历Object对象并依次呈现元素内容

@Entry
@Component
struct Index {
  @State message: string = '循环渲染'
  //创建一个对象数组
  @State obj:object[] = [
    {
      id:'001',
      name:'江上',
      age:16
    },
    {
      id:'002',
      name:'明月',
      age:25
    },
    {
      id:'003',
      name:'造物者',
      age:35
    }
  ]

  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        Divider()

        //使用ForEach渲染：遍历每一个数据并用Text呈现在UI界面上
        //第一个参数为需要遍历的数组，第二参数为对每个遍历元素进行操作的函数，第三参数为返回的每一个元素索引（唯一值）
        //此处总共遍历3个项目，每一个项目下面都有三个元素：id,name,age
        ForEach(this.obj,(item1)=>{
          Text(`${item1.id}=> ${item1.name}=> ${item1.age} `)
            .fontSize(30)
            .fontStyle(FontStyle.Italic)
        },(item2)=>{
          return item2.id
          //错误示范：return item2
        })

      }
      .width('100%')
    }
    .height('100%')
  }
}