@[toc]

ArkTS渲染控制概述：条件渲染的艺术

在ArkTS的UI开发中，渲染控制是一项强大的功能，通过条件渲染语句，你可以根据应用的状态，动态地构建UI。本文将深入探讨ArkTS中的条件渲染，包括if、else和else if语句的使用规则、更新机制以及在不同场景中的应用。

条件渲染的基本概念

ArkTS通过自定义组件的build()函数和@builder装饰器中的声明式UI描述语句构建UI。除了使用系统组件外，开发者还可以通过条件渲染语句来辅助UI的构建。条件渲染语句包括if、else和else if，用于根据不同状态显示对应的UI内容。

if/else语句的使用规则

在ArkTS中，条件渲染语句具有以下使用规则：

• 支持if、else和else if语句。
• 条件语句可以使用状态变量。
• 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。
• 在涉及到组件的父子关系时是“透明”的，要遵守父组件关于子组件使用的规则。
• 每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。

更新机制

当if、else if后跟随的状态判断中使用的状态变量值变化时，条件渲染语句会进行更新，更新步骤如下：

1. 评估if和else if的状态判断条件，如果分支没有变化，无需执行以下步骤。
2. 删除此前构建的所有子组件。
3. 执行新分支的构造函数，将获取到的组件添加到if父容器中。如果缺少适用的else分支，则不构建任何内容。
   

使用场景示例

使用if进行条件渲染

@Entry
@Component
struct ViewA {
  @State count: number = 0;

  build() {
    Column() {
      Text(`count=${this.count}`)

      if (this.count > 0) {
        Text(`count is positive`)
          .fontColor(Color.Green)
      }

      Button('increase count')
        .onClick(() => {
          this.count++;
        })

      Button('decrease count')
        .onClick(() => {
          this.count--;
        })
    }
  }
}

在上述示例中，if语句的每个分支都包含一个构建函数。在初始渲染时，if语句会执行构建函数，并将生成的子组件添加到其父组件中。每当count从0增加到1时，if语句会更新，条件count > 0将重新评估，评估结果将从false更改为true。因此，将执行条件为真分支的构造函数，创建一个Text组件，并将它添加到父组件Column中。

if … else …语句和子组件状态

@Component
struct CounterView {
  @State counter: number = 0;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ label: 'CounterView #positive' })
      } else {
        CounterView({ label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

在上述示例中，CounterView（label为 ‘CounterView #positive’）子组件在初次渲染时创建。当修改CounterView.counter状态变量时，CounterView子组件重新渲染时并保留状态变量值。当MainView.toggle状态变量的值更改为false时，MainView父组件内的if语句将更新，随后将删除CounterView（label为 ‘CounterView #positive’）子组件。与此同时，将创建新的CounterView（label为 ‘CounterView #negative’）实例，其自己的counter状态变量设置为初始值0。

嵌套if语句

@Entry
@Component
struct CompA {
  @State toggle: boolean = false;
  @State toggleColor: boolean = false;

  build() {
    Column() {
      Text('Before').fontSize(15)
      if (this.toggle) {
        Text('Top True, positive 1 top').backgroundColor('#aaffaa').fontSize(20)
        // 内部if语句
        if (this.toggleColor) {
          Text('Top True, Nested True, positive COLOR  Nested ').backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Top True, Nested False, Negative COLOR  Nested ').backgroundColor('#aaaaff').fontSize(15)
        }
      } else {
        Text('Top false, negative top level').fontSize(20).backgroundColor('#ffaaaa')
        if (this.toggleColor) {
          Text('positive COLOR  Nested ').backgroundColor('#00aaaa').fontSize(15)
        } else {
          Text('Negative COLOR  Nested ').backgroundColor('#aaaaff').fontSize(15)
        }
      }
      Text('After').fontSize(15)
      Button('Toggle Outer')
        .onClick(() => {
          this.toggle = !this.toggle;
        })
      Button('Toggle Inner')
        .onClick(() => {
          this.toggleColor = !this.toggleColor;
        })
    }
  }
}

在嵌套if语句的示例中，条件语句的嵌套对父组件的相关规则没有影响。内部if语句与外部if语句独立运作，根据各自的条件构建对应的UI内容。在这个例子中，通过按钮的点击事件，可以动态切换外部和内

部if语句的条件，实现更复杂的条件渲染效果。

优化状态管理与子组件状态保留

在ArkTS中，对于复杂组件结构和状态管理的优化是至关重要的。特别是在条件渲染中，需要注意子组件状态的保留以避免数据丢失。以下示例展示了在条件更改时保留状态的修改。

@Component
struct CounterView {
  @Link counter: number;
  label: string = 'unknown';

  build() {
    Row() {
      Text(`${this.label}`)
      Button(`counter ${this.counter} +1`)
        .onClick(() => {
          this.counter += 1;
        })
    }
  }
}

@Entry
@Component
struct MainView {
  @State toggle: boolean = true;
  @State counter: number = 0;

  build() {
    Column() {
      if (this.toggle) {
        CounterView({ counter: $counter, label: 'CounterView #positive' })
      } else {
        CounterView({ counter: $counter, label: 'CounterView #negative' })
      }
      Button(`toggle ${this.toggle}`)
        .onClick(() => {
          this.toggle = !this.toggle;
        })
    }
  }
}

在这个示例中，@State counter变量属于父组件 MainView。因此，当CounterView组件实例被删除时，该变量不会被销毁。CounterView组件通过@Link装饰器引用状态，确保状态从子级移动到其父级，以避免在条件内容或重复内容被销毁时丢失状态。

总结

ArkTS的渲染控制功能为开发者提供了强大的工具，使得UI的构建变得灵活而动态。通过条件渲染语句，开发者可以根据应用的状态实时更新UI，创造出更具交互性和用户友好性的应用界面。

在使用条件渲染时，开发者需要注意以下几点：

1. 构建函数规则： 每个分支内部的构建函数必须遵循构建函数的规则，并创建一个或多个组件。避免空构建函数，以防止语法错误。

2. 状态管理： 注意子组件状态的管理，尤其是在条件更改时，确保关键状态不会丢失。使用@Link装饰器可以有效地保留状态。

3. 嵌套条件渲染： 嵌套if语句对父组件的相关规则没有影响，可以根据需要灵活地构建复杂的UI结构。

通过深入理解这些概念，开发者可以更好地利用ArkTS的渲染控制功能，创造出更加动态和响应式的用户界面。在实际项目中，结合具体场景，巧妙地运用条件渲染，将为用户提供更出色的使用体验。

结语

ArkTS的条件渲染功能为开发者提供了灵活而强大的UI构建工具，通过if、else和else if语句，可以根据应用的状态实现动态渲染不同的UI组件。深入理解条件渲染的使用规则和更新机制，对于构建复杂的用户界面至关重要。希望本文能够帮助你更好地利用ArkTS的渲染控制功能，创造出更加丰富和动态的用户体验。