1. if…else 条件渲染
- 根据应用的不同状态,渲染不同的UI界面。
- 修改条件分支的时候,会把原来的条件分支组件先删除,再重新创建一个条件分支组件。
1.1 代码示例如下:
// 自定义组件
@Component
struct MyChild {
@Link count: number // @Link装饰器 - 父子双向同步 - 禁止本地初始化
@Prop label: string // @Prop装饰器 - 父子单向同步 - 允许本地初始化
build() {
Row() {
Flex({justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center}) {
Text(`${this.label}`)
Button(`计数器${this.count}`).onClick(() => {
this.count += 1
})
}
}
}
}
@Entry
@Component
struct UITest6 {
@State flag: boolean = true // @State装饰器 - 组件内状态 - 必须本地初始化
@State parentCount: number = 0
build() {
Column() {
if (this.flag) {
MyChild({ count: $parentCount, label: '真真' })
} else {
MyChild({ count: $parentCount, label: '假假' })
}
Button(`是否真假:${this.flag}`).onClick(() => {
this.flag = !this.flag
}).margin(10)
}
}
}
2. 循环渲染
- 可使用 ForEach 语句基于一个数组来快速渲染一个组件列表。
- ForEach接口 基于
数组类型数据
来进行循环渲染,需要与容器组件配合使用,且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
例如,ListItem组件要求ForEach的父容器组件必须为List组件。- 和 if…else 不一样,会做二次渲染,可以做到单独修改某一个值。
2.1 接收三个参数
ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)
2.1.1 arr
- 需要进行循环渲染的数据源,必须为数组类型。
2.1.2 itemGenerator
- 组件生成函数,用于为 arr 数组中的每个元素创建对应的组件。
- 该函数可接收俩个参数,分别是:
item:arr 数组中的数据项,
index(可选):arr 数组中的数据项的索引。
2.1.3 keyGenerator(可选)
- 是 key 生成函数,用于 arr 数组中的每个数据项生成唯一的 key
- key 的作用:
ForEach 在数组发生变化时,需要重新渲染组件列表,再重新渲染时,它会尽量复用原来的组件对象,而不是重新渲染整个组件列表。
key 的作用就是辅助 ForEach 完成组件对象的复用。- 具体逻辑如下:
ForEach 在进行初次渲染时,会使用 keyGenerator 为数组中的每个元素生成一个唯一的 key,并将 key 作为组件对象的标识。当数组发生变化导致 ForEach 需要重新渲染时,ForEach 会再次使用 keyGenerator 为每个元素重新生成一遍 key,然后 ForEach 会检查新生成的 key 在上次渲染时是否已经存在,若存在,ForEach 就会认为这个 key 对应的数组元素没有发生变化,那它就会直接复用这个 key 所对应的组件对象;若不存在,ForEach 就会认为这个 key 对应的元素发生了变化,或者该元素为新增元素,此时,就会为该元素重新创建一个组件对象。- 如果开发者没有定义 keyGenerator函数,则系统会使用默认的 key 生成函数,即
(item: any, index: number) => { return index + '_' + JSON.stringify(item)}
在某些情况下默认的 key 生成函数,会导致界面渲染效率低下,此时可考虑通过 keyGenerator函数 自定义生成逻辑,即
ForEach(this.arr, (item) => {Text(item)}, item => JSON.stringify(item) )
- 在自定义 key 的生成逻辑时,必须得保证每个元素的 key 都是唯一的,这是规定好的。
2.2 代码示例如下:
// 自定义组件
@Component
struct MyChild {
@Prop label: string
build() {
Column() {
Text(this.label).fontSize(24).fontColor("#9955FF")
}
}
}
@Entry
@Component
struct UITest7 {
@State my_array: Array<string> = ['one', 'two', 'three']
build() {
Column({space: 15}) {
ForEach(this.my_array, (item: string, index: number) => { // ForEach接口基于数组类型数据来进行循环渲染,需要与容器组件配合使用。
MyChild({label: item}) // 且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。
})
Button('修改two').onClick(() => {
this.my_array[1] = 'new_two' // 和 if..else 不一样,会做二次渲染,可以做到单独修改某一个值。
})
}
.justifyContent(FlexAlign.Center)
.height("100%")
.width('100%')
}
}