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

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

@Component

struct 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框架将视为该数组元素已被替换或修改，并会基于新的键值创建一个新的组件。

ForEach提供了一个名为keyGenerator的参数，这是一个函数，开发者可以通过它自定义键值的生成规则。如果开发者没有定义keyGenerator函数，则ArkUI框架会使用默认的键值生成函数，即(item: any, index: number) => { return index + '__' + JSON.stringify(item); }。

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

图1 ForEach键值生成规则

3.2、 Demo如下

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

@Entry

@Component

struct 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)

  }

}

@Component

struct ChildItem {

  @Prop item: string;

  build() {

    Text(this.item)

      .fontSize(50)

      .margin({

        bottom: 10

      })

  }

}

3.3、需要注意的keyGenerator

我们如果要复写keyGenerator，一定要保证其生成的值与实际的业务是严格对应关系，否则，keyGenerator函数如果生成有重复（不同的业务场景对应相同的key），则可能导致渲染异常问题。

举例，假设我们有个列表，用于显示数组中的所有字符串，如果我们复写了keyGenerator，使用其字符串内容作为key。示意如下：

4、结语

至此，我们的“鸿蒙UI开发快速入门系列”正式结束了！! 接下来，我们将围绕UI开发的一些细节做展开，例如：学习ArkUI提供的所有布局方式、学习系统的常用控件、UI动画等。

请持续关注后续“鸿蒙UI开发系列”。

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