鸿蒙UI开发快速入门 —— part12: 渲染控制

如果你对鸿蒙开发感兴趣，加入Harmony自习室吧~👇🏻👇🏻👇🏻👇🏻

扫描下面的二维码关注公众号。

1、前言

在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助UI的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句。

2、条件渲染

假设我们存在这样一个应用场景：当我们的界面在满足某种条件时，需要显示一些组件，在不满足某些条件时，不显示某些组件（比如登录注册时的错误提示）。

举例：在下面的案例中，数字为偶数时，我们需要提示一个红色的文字，否则不显示红色的文字。

此时，我们就需要用到鸿蒙提供的条件渲染。ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用if、else和else if渲染对应状态下的UI内容。

使用规则如下：

支持if、else和else if语句。
if、else if后跟随的条件语句可以使用状态变量。
允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
条件渲染语句在涉及到组件的父子关系时是“透明”的，当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。
每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。无法创建组件的空构建函数会产生语法错误。
某些容器组件限制子组件的类型或数量，将条件渲染语句用于这些组件内时，这些限制将同样应用于条件渲染语句内创建的组件。例如，Grid容器组件的子组件仅支持GridItem组件，在Grid内使用条件渲染语句时，条件渲染语句内仅允许使用GridItem组件。

if条件渲染与我们通常写的逻辑if、else、else if保持一致。本小节中举例的使用代码如下：

@Entry@Componentstruct Index {  @State num: number = 1;  build() {    Row() {    Column({ space: 15 }) {        Text(`当前数字: ${this.num}`)        Button('将数字+1')          .onClick(() => this.num++);      // 偶数      if(this.num % 2 === 0) {        Text('当前输入的数字是偶数！')          .fontColor(Color.Red)      }      }.width('100%')    }.height('100%')  }}

代码中，this.num % 2 === 0表示是偶数，在遇到偶数时，if条件成立，最终显示'当前输入的数字是偶数！'提示，否则提示消失。

3、循环渲染

ForEach接口基于数组类型数据来进行循环渲染，需要与容器组件配合使用，且接口返回的组件应当是允许包含在ForEach父容器组件中的子组件。

3.1、接口描述

ForEach(  arr: Array,  itemGenerator: (item: any, index: number) => void,  keyGenerator?: (item: any, index: number) => string)

arr：必填，是需要渲染的组件的数据源。

itemGenerator：必填，是组件生成函数。

keyGenerator: 可选，是键值生成函数（确定唯一性）

在ForEach循环渲染过程中，系统会为每个数组元素生成一个唯一且持久的键值，用于标识对应的组件。当这个键值变化时，ArkUI框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ArkUI框架对于ForEach的键值生成有一套特定的判断规则，这主要与itemGenerator函数的第二个参数index以及keyGenerator函数的第二个参数index有关，具体的键值生成规则判断逻辑如下图所示。

图1 ForEach键值生成规则

3.2、 Demo如下

我们创建一个数组，然后将数组中的内容使用Text()分别展示出来

@Entry@Componentstruct Index {  @State simpleList: Array<string> = ['one', 'two', 'three', 'four', 'five'];  build() {    Row() {      Column() {        ForEach(this.simpleList, (item: string, idx: number) => {          ChildItem({ 'item': `${idx+1}.${item}` } as Record<string, string>)        })      }      .alignItems(HorizontalAlign.Start)      .padding(10)      .width('100%')      .height('100%')    }    .height('100%')    .backgroundColor(0xF1F3F5)  }}@Componentstruct ChildItem {  @Prop item: string;  build() {    Text(this.item)      .fontSize(50)      .margin({        bottom: 10      })  }}