文章目录
- 一、条件渲染(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%')
}
}