哪家手表网站,打开网站占空间,网站建设公司加盟,转发 wordpress 奖励文章目录 一、条件渲染#xff08;if#xff09;二、循环渲染#xff08;ForEach#xff09; 一、条件渲染#xff08;if#xff09;
1、定义 正如其他语言中的if…else…语句#xff0c;ArkTS提供了渲染控制的能力#xff0c;条件渲染可根据应用的不同状态#xff0… 文章目录 一、条件渲染if二、循环渲染ForEach 一、条件渲染if
1、定义 正如其他语言中的if…else…语句ArkTS提供了渲染控制的能力条件渲染可根据应用的不同状态使用if、else和else if渲染对应状态下的UI内容。 语法结构为if(条件表达式/布尔值){ ... }else{ ... }
2、使用规则 1if、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: Arraystring [江上,清风,山间,明月,造物者]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,ageForEach(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%)}
}
