1. 渲染-条件渲染
1.1 基本介绍
在 ArkTS 中 我们要根据某个状态来控制元素或者组件的显示隐藏 可以采用条件渲染
1.2 使用 if/else（创建销毁元素）
代码示例
@Entry @Component struct Index {
@State isShow:boolean=true build() { Column() { Button('显示/隐藏') .width(100) .height(30) .onClick(()=>{ if(this.isShow){ this.isShow=false }else{ this.isShow=true } }) if(this.isShow){ Text('我是东林').width(200).height(200).fontSize(40) } }.width('100%') .height('100%') } }
复制代码
1.3 visibility 属性控制
visibility 属性有以下三种：
1、Visible 显示
2、Hidden 隐藏
3、None 隐藏，但是不占位置
代码示例
@Entry @Component struct Index {
@State isShow:boolean=true build() { Column() { Button('显示/隐藏') .width(100) .height(30) .onClick(()=>{ if(this.isShow){ this.isShow=false }else{ this.isShow=true } }) Text('我是东林').width(200).height(200).fontSize(40) .backgroundColor(Color.Green) .visibility(this.isShow?Visibility.Visible:Visibility.Hidden)
Text('小头').width(200).height(200).fontSize(40) .backgroundColor(Color.Yellow) }.width('100%') .height('100%') } }
复制代码
2. 渲染-循环渲染
2.1 基本介绍
循环渲染使用 ForEach 方法来进行
ForEach 接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在 ForEach 父容器组件中的子组件。例如，ListItem 组件要求 ForEach 的父容器组件必须为List组件。
官方参考文档
文档中心
语法结构
ForEach( // 数据源 arr: Array, // 组件生成函数 itemGenerator: (item: 单项, index?: number) => void, // 键值生成函数 keyGenerator?: (item: 单项, index?: number): string => string )
复制代码
代码示例
import FruitModel from '../model/FruitModel';
@Entry @Component struct Index { @State fruits: FruitModel[]=[new FruitModel('1','苹果','100') ,new FruitModel('2','香蕉','90'), new FruitModel('3','西瓜','200')];
build() { Row() { Column() { ForEach(this.fruits, (item: FruitModel) => { Text(`${item.id}:${item.name}:${item.vote}`) .width(200) .height(200) }, (item: FruitModel) => item.id) } .width('100%') .height('100%') } .height('100%') } }
复制代码
2.2 首次渲染
在 ForEach 首次渲染时，会根据前述键值生成规则为数据源的每个数组项生成唯一键值，并创建相应的组件。
@Entry@Componentstruct Index { @State simpleList: Array<string> = ['苹果', '香蕉', '西瓜'];
build() { Row() { Column() { ForEach(this.simpleList, (item: string) => { ChildItem({ item: item }) }, (item: string) => item) } .width('100%') .height('100%') } .height('100%') }}
@Componentstruct ChildItem { @Prop item: string;
build() { Text(this.item) .fontSize(50) }}
复制代码
在上述代码中，键值生成规则是 keyGenerator 函数的返回值 item。在 ForEach 渲染循环时，为数据源数组项依次生成键值苹果、香蕉和西瓜，并创建对应的 ChildItem 组件渲染到界面上。
当不同数组项按照键值生成规则生成的键值相同时，框架的行为是未定义的。例如，在以下代码中，ForEach 渲染相同的数据项香蕉时，只创建了一个 ChildItem 组件，而没有创建多个具有相同键值的组件。
@Entry @Component struct Index { @State simpleList: Array<string> = ['苹果', '香蕉', '香蕉','西瓜'];
build() { Row() { Column() { ForEach(this.simpleList, (item: string) => { ChildItem({ item: item }) }, (item: string) => item) } .width('100%') .height('100%') } .height('100%') } }
@Component struct ChildItem { @Prop item: string;
build() { Text(this.item) .fontSize(50) } }
复制代码
在该示例中，最终键值生成规则为 item。当 ForEach 遍历数据源 simpleList，遍历到索引为 1 的香蕉时，按照最终键值生成规则生成键值为香蕉的组件并进行标记。当遍历到索引为 2 的香蕉时，按照最终键值生成规则当前项的键值也为香蕉，此时不再创建新的组件。
2.3 非首次渲染
在 ForEach 组件进行非首次渲染时，它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在，则会创建一个新的组件；如果键值存在，则不会创建新的组件，而是直接渲染该键值所对应的组件。例如，在以下的代码示例中，通过点击事件修改了数组的第三项值为"西瓜 test"，这将触发 ForEach 组件进行非首次渲染。
@Entry @Component struct Index { @State simpleList: Array<string> = ['苹果', '香蕉','西瓜'];
build() { Row() { Column() { Text('点击修改第3个数组项的值') .fontSize(24) .fontColor(Color.Red) .onClick(() => { this.simpleList[2] = '西瓜test'; })
ForEach(this.simpleList, (item: string) => { ChildItem({ item: item }) }, (item: string) => item) } .width('100%') .height('100%') } .height('100%') } }
@Component struct ChildItem { @Prop item: string;
build() { Text(this.item) .fontSize(50) } }
复制代码
评论