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

一、条件渲染（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,ageForEach(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%')}
}