电子商务网站建设与管理的学后感,怎么做游戏测评视频网站,做网站需要什么框架,微信小游戏代理平台注意#xff1a;博主有个鸿蒙专栏#xff0c;里面从上到下有关于鸿蒙next的教学文档#xff0c;大家感兴趣可以学习下
如果大家觉得博主文章写的好的话#xff0c;可以点下关注#xff0c;博主会一直更新鸿蒙next相关知识
目录
1. 渲染-条件渲染
1.1 基本介绍
1.2 使… 注意博主有个鸿蒙专栏里面从上到下有关于鸿蒙next的教学文档大家感兴趣可以学习下
如果大家觉得博主文章写的好的话可以点下关注博主会一直更新鸿蒙next相关知识
目录
1. 渲染-条件渲染
1.1 基本介绍
1.2 使用if/else创建销毁元素
1.3 visibility属性控制
2. 渲染-循环渲染
2.1 基本介绍
2.2 首次渲染
2.3 非首次渲染 1. 渲染-条件渲染 1.1 基本介绍
在ArkTS中 我们要根据某个状态来控制元素或者组件的显示隐藏 可以采用条件渲染 1.2 使用if/else创建销毁元素
使用规则如下 支持if、else和else if语句。 if、else if后跟随的条件语句可以使用状态变量。 允许在容器组件内使用通过条件渲染语句构建不同的子组件。 条件渲染语句在涉及到组件的父子关系时是“透明”的当父组件和子组件之间存在一个或多个if语句时必须遵守父组件关于子组件使用的规则。 每个分支内部的构建函数必须遵循构建函数的规则并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。 某些容器组件限制子组件的类型或数量将条件渲染语句用于这些组件内时这些限制将同样应用于条件渲染语句内创建的组件。例如Grid容器组件的子组件仅支持GridItem组件在Grid内使用条件渲染语句时条件渲染语句内仅允许使用GridItem组件。
代码示例
EntryComponentstruct Index {State isShow:booleantruebuild() {Column() {Button(显示/隐藏).width(100).height(30).onClick((){if(this.isShow){this.isShowfalse}else{this.isShowtrue}})if(this.isShow){Text(我是东林).width(200).height(200).fontSize(40)}}.width(100%).height(100%)}} 1.3 visibility属性控制
visibility属性有以下三种
1、Visible 显示
2、Hidden 隐藏
3、None 隐藏但是不占位置
代码示例
EntryComponentstruct Index {State isShow:booleantruebuild() {Column() {Button(显示/隐藏).width(100).height(30).onClick((){if(this.isShow){this.isShowfalse}else{this.isShowtrue}})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)
arr必填是需要渲染的组件的数据源。
itemGenerator必填是组件生成函数。
keyGenerator: 可选是键值生成函数确定唯一性
在ForEach循环渲染过程中系统会为每个数组元素生成一个唯一且持久的键值用于标识对应的组件。当这个键值变化时ArkUI框架将视为该数组元素已被替换或修改并会基于新的键值创建一个新的组件。
ForEach提供了一个名为keyGenerator的参数这是一个函数开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数则ArkUI框架会使用默认的键值生成函数即(item: any, index: number) { return index __ JSON.stringify(item); }。 代码示例
import FruitModel from ../model/FruitModel;EntryComponentstruct 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
Component
struct Index {State simpleList: Arraystring [苹果, 香蕉, 西瓜];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)}
}
在上述代码中键值生成规则是keyGenerator函数的返回值item。在ForEach渲染循环时为数据源数组项依次生成键值苹果、香蕉和西瓜并创建对应的ChildItem组件渲染到界面上。
当不同数组项按照键值生成规则生成的键值相同时框架的行为是未定义的。例如在以下代码中ForEach渲染相同的数据项香蕉时只创建了一个ChildItem组件而没有创建多个具有相同键值的组件。 EntryComponentstruct Index {State simpleList: Arraystring [苹果, 香蕉, 香蕉,西瓜];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)}}
在该示例中最终键值生成规则为item。当ForEach遍历数据源simpleList遍历到索引为1的香蕉时按照最终键值生成规则生成键值为香蕉的组件并进行标记。当遍历到索引为2的香蕉时按照最终键值生成规则当前项的键值也为香蕉此时不再创建新的组件。 2.3 非首次渲染 在ForEach组件进行非首次渲染时它会检查新生成的键值是否在上次渲染中已经存在。如果键值不存在则会创建一个新的组件如果键值存在则不会创建新的组件而是直接渲染该键值所对应的组件。例如在以下的代码示例中通过点击事件修改了数组的第三项值为西瓜test这将触发ForEach组件进行非首次渲染。 EntryComponentstruct Index {State simpleList: Arraystring [苹果, 香蕉,西瓜];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%)}}Componentstruct ChildItem {Prop item: string;build() {Text(this.item).fontSize(50)}}
