ArkTS if else条件渲染的用法（附带示例）

ArkTS 提供了渲染控制的能力。条件渲染可根据应用的不同状态，使用 if、else 和 else if 渲染对应状态下的 UI 内容。

if/else 条件渲染使用规则如下：

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

以下是一个嵌套 if 语句的使用示例：

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

  build() {
    Column({ space: 20 }) {
      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;
        })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}