
【HarmonyOS Next之旅】ArkTS语法(三) -> 渲染控制 原创
目录
3.2 -> DataChangeListener类型说明
ArkTS也提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。
1 -> 条件渲染
使用if/else进行条件渲染。
说明
- if/else条件语句可以使用状态变量。
- 使用if/else可以使子组件的渲染依赖条件语句。
- 必须在容器组件内使用。
- 某些容器组件限制子组件的类型或数量,将if/else用于这些组件内时,这些限制将同样应用于if/else语句内创建的组件。例如,Grid容器组件的子组件仅支持GridItem组件,在Grid内使用if/else时,则if/else语句内也仅允许使用GridItem组件。
2 -> 循环渲染
通过循环渲染(ForEach)从数组中获取数据,并为每个数据项创建相应的组件,可减少代码复杂度。
参数名 | 参数类型 | 必填 | 参数描述 |
arr | any[] | 是 | 必须是数组,允许设置为空数组,空数组场景下将不会创建子组件。同时允许设置返回值为数组类型的函数,例如arr.slice(1, 3),设置的函数不得改变包括数组本身在内的任何状态变量,如Array.splice、Array.sort或Array.reverse这些改变原数组的函数。 |
itemGenerator | (item:any, index?: number) => void | 是 | 生成子组件的lambda函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。 |
keyGenerator | (item:any, index?: number) => string | 否 | 匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则ForEach中的所有节点都将重建。 |
说明
- ForEach必须在容器组件内使用。
- 生成的子组件应当是允许包含在ForEach父容器组件中的子组件。
- 允许子组件生成器函数中包含if/else条件渲染。
3 -> 数据懒加载
通过数据懒加载(LazyForEach)从提供的数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。
参数名 | 参数类型 | 必填 | 参数描述 |
dataSource | IDataSource | 是 | 实现IDataSource接口的对象,需要开发者实现相关接口。 |
itemGenerator | (item: any) => void | 是 | 生成子组件的lambda函数,为数组中的每一个数据项创建一个或多个子组件,单个子组件或子组件列表必须包括在大括号“{...}”中。 |
keyGenerator | (item: any) => string | 否 | 匿名函数,用于给数组中的每一个数据项生成唯一且固定的键值。当数据项在数组中的位置更改时,其键值不得更改,当数组中的数据项被新项替换时,被替换项的键值和新项的键值必须不同。键值生成器的功能是可选的,但是,为了使开发框架能够更好地识别数组更改,提高性能,建议提供。如将数组反向时,如果没有提供键值生成器,则LazyForEach中的所有节点都将重建。 |
3.1 -> IDataSource类型说明
名称 | 描述 |
totalCount(): number | 获取数据总数 |
getData(index: number): any | 获取索引值index对应的数据 |
registerDataChangeListener(listener: DataChangeListener): void | 注册数据改变的监听器 |
unregisterDataChangeListener(listener: DataChangeListener): void | 注销数据改变的监听器 |
3.2 -> DataChangeListener类型说明
名称 | 描述 |
onDataReloaded(): void | 重新加载所有数据 |
onDataAdded(index: number): void (deprecated) | 通知组件index的位置有数据添加 |
onDataMoved(from: number, to: number): void (deprecated) | 通知组件数据从from的位置移到to的位置 |
onDataDeleted(index: number): void (deprecated) | 通知组件index的位置有数据删除 |
onDataChanged(index: number): void (deprecated) | 通知组件index的位置有数据变化 |
onDataAdd(index: number): void 8+ | 通知组件index的位置有数据添加 |
onDataMove(from: number, to: number): void 8+ | 通知组件数据从from的位置移到to的位置 |
onDataDelete(index: number): void 8+ | 通知组件index的位置有数据删除 |
onDataChange(index: number): void 8+ | 通知组件index的位置有数据变化 |
说明
- LazyForEach必须在容器组件内使用,目前仅有List、Grid以及Swiper组件支持数据懒加载(即只加载可视部分以及其前后少量数据用于缓冲),其他组件仍然是一次性加载所有的数据。
- LazyForEach在每次迭代中,必须创建且只允许创建一个子组件。
- 生成的子组件必须是允许包含在LazyForEach父容器组件中的子组件。
- 允许LazyForEach包含在if/else条件渲染语句中,但不允许LazyForEach中出现if/else条件渲染语句。
- 为了高性能渲染,通过DataChangeListener对象的onDataChange方法来更新UI时,仅当itemGenerator中创建的子组件内使用了状态变量时,才会触发组件刷新。
- itemGenerator函数的调用顺序不一定和数据源中的数据项相同,在开发过程中不要假设itemGenerator和keyGenerator函数是否执行及其执行顺序。例如,以下示例可能无法正常工作:
LazyForEach(dataSource,
item => Text(`${item.i}. item.data.label`)),
item => item.data.id.toString())
感谢各位大佬支持!!!
互三啦!!!
