鸿蒙学习实战之路-ArkTS 条件渲染\_ifelse 使用指南

害，最近好多刚开始学鸿蒙开发的朋友问我：“西兰花啊，我以前写前端页面的时候，可以用 if else 控制页面内容，在鸿蒙里是不是也可以？还是要写很多复杂的代码？” 害，这问题可问对人了！今天这篇，我就手把手带你从零开始搞定，保证你 5 分钟就能学会～

刺猬二大爷

524人浏览 · 2025-12-31 00:15:00

刺猬二大爷 · 2025-12-31 00:15:00 发布

鸿蒙学习实战之路-ArkTS 条件渲染_ifelse 使用指南

害，最近好多刚开始学鸿蒙开发的朋友问我：“西兰花啊，我以前写前端页面的时候，可以用 if else 控制页面内容，在鸿蒙里是不是也可以？还是要写很多复杂的代码？” 害，这问题可问对人了！

今天这篇，我就手把手带你从零开始搞定 ArkTS 条件渲染，保证你 5 分钟就能学会～

这是个啥？

ArkUI 通过自定义组件的 build() 函数和 @Builder 装饰器中的声明式 UI 描述语句构建相应的 UI。在声明式描述语句中开发者除了使用系统组件外，还可以使用渲染控制语句来辅助 UI 的构建，这些渲染控制语句包括控制组件是否显示的条件渲染语句，基于数组数据快速生成组件的循环渲染语句，针对大数据量场景的数据懒加载语句，针对混合模式开发的组件渲染语句。

简单来说，条件渲染就是根据条件动态显示不同的 UI 内容，这就像 Vue 里的 v-if 指令，或者 React 里的三元表达式一样～

这玩意儿能干什么？

条件渲染能帮你实现很多实用场景：

登录状态控制：登录后显示用户信息，未登录显示登录按钮
数据加载状态：加载中显示 Loading，成功后显示数据，失败显示错误信息
权限控制：根据用户权限显示不同的功能按钮
响应式界面：根据屏幕尺寸或设备类型显示不同布局
购物车状态：有商品时显示购物车，空购物车时显示提示

🥦 西兰花小贴士：
条件渲染非常适合做状态管理，比如 loading、success、error 三种状态的切换，比用 visibility 或 display 属性更灵活～

使用规则你得知道

在开始写代码之前，这些规则你得先了解：

规则类别	具体说明
语法支持	支持 `if`、`else` 和 `else if` 完整条件语句
条件变量	可使用状态变量（值改变时实时渲染 UI），可使用常规变量（值改变不会触发 UI 更新）
容器限制	允许在容器组件内使用，条件渲染对组件父子关系是"透明"的
构建函数规则	每个分支内部的构建函数必须创建一个或多个组件，空构建函数会产生语法错误

🥦 西兰花警告：
注意了！条件分支里的构建函数不能是空的，必须至少创建一个组件。我之前写了个 if (show) { } 结果编译报错，整了半天才发现…（┓( ´∀` )┏）

跟着我做，3 种用法搞定

1. 基础 if 条件渲染

最简单的情况，就是根据一个变量显示不同的文本或组件：

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

  build() {
    Column() {
      Text(`当前计数: ${this.count}`)
        .fontSize(18)

      // 条件渲染核心代码
      if (this.count > 0) {
        Text(`计数为正数`)
          .fontColor(Color.Green)
          .fontSize(16)
      } else if (this.count < 0) {
        Text(`计数为负数`)
          .fontColor(Color.Red)
          .fontSize(16)
      } else {
        Text(`计数为零`)
          .fontColor(Color.Gray)
          .fontSize(16)
      }

      Button('增加计数')
        .onClick(() => this.count++)
        .margin(5)

      Button('减少计数')
        .onClick(() => this.count--)
        .margin(5)
    }
    .width('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}

工作原理：

初始渲染时，if 语句执行构建函数并添加相应组件
当 count 状态变量变化时，条件语句重新评估
分支变化时，旧组件被移除，新组件被创建并添加到父组件

这就像 Vue 的 v-if 一样，条件为真时创建组件，为假时销毁组件～

2. 状态管理问题与解决方案

这里有个坑需要注意！当条件切换时，子组件的状态会被重置：

// 子组件定义
@Component
struct CounterView {
  @State counter: number = 0;
  label: string = 'unknown';

  build() {
    Column({ space: 10 }) {
      Text(this.label)
        .fontSize(16)

      Button(`计数器: ${this.counter} +1`)
        .onClick(() => this.counter++)
        .width('100%')
    }
    .margin(10)
    .padding(15)
    .border({ width: 1, color: Color.Gray })
    .borderRadius(5)
  }
}

// 父组件使用条件渲染
@Entry
@Component
struct IfElseStateManagement {
  @State toggle: boolean = true;

  build() {
    Column() {
      // 条件渲染子组件
      if (this.toggle) {
        CounterView({ label: '正向计数器' })
      } else {
        CounterView({ label: '反向计数器' })
      }

      Button(`切换状态 (当前: ${this.toggle})`)
        .onClick(() => this.toggle = !this.toggle)
        .margin(10)
    }
    .width('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}

问题所在：

当 toggle 状态变化时，旧的 CounterView 实例会被删除，创建新的实例
新旧 CounterView 是同一自定义组件的不同实例，状态不会共享
所以每次切换都会重置计数

🥦 西兰花警告：
这是条件渲染的一个常见坑！很多人以为子组件状态会保留，结果发现切换后数据丢失了…解决方法就是状态提升～

解决方案 - 状态提升：

@Component
struct CounterView {
  @Link counter: number; // 使用@Link引用父组件状态
  label: string = 'unknown';

  build() {
    Column({ space: 10 }) {
      Text(this.label)
        .fontSize(16)

      Button(`计数器: ${this.counter} +1`)
        .onClick(() => this.counter++)
        .width('100%')
    }
    .margin(10)
    .padding(15)
    .border({ width: 1, color: Color.Gray })
    .borderRadius(5)
  }
}

@Entry
@Component
struct StatePreservationExample {
  @State toggle: boolean = true;
  @State counter: number = 0; // 状态提升至父组件

  build() {
    Column() {
      if (this.toggle) {
        CounterView({
          label: '正向计数器',
          counter: $counter // 传递状态引用
        })
      } else {
        CounterView({
          label: '反向计数器',
          counter: $counter // 共享同一状态
        })
      }

      Button(`切换状态 (当前: ${this.toggle})`)
        .onClick(() => this.toggle = !this.toggle)
        .margin(10)
    }
    .width('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}

这样就能在切换条件时保持状态不变啦～

3. 嵌套条件渲染

复杂业务逻辑经常需要嵌套 if 语句：

@Entry
@Component
struct NestedIfExample {
  @State toggleOuter: boolean = false;
  @State toggleInner: boolean = false;

  build() {
    Column({ space: 15 }) {
      Text('条件渲染嵌套示例')
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      // 外层条件
      if (this.toggleOuter) {
        Column({ space: 10 }) {
          Text('外层条件为真')
            .fontSize(18)
            .backgroundColor('#aaffaa')
            .padding(10)

          // 内层条件
          if (this.toggleInner) {
            Text('内层条件为真')
              .fontSize(16)
              .backgroundColor('#00aaaa')
              .padding(8)
          } else {
            Text('内层条件为假')
              .fontSize(16)
              .backgroundColor('#aaaaff')
              .padding(8)
          }
        }
      } else {
        Column({ space: 10 }) {
          Text('外层条件为假')
            .fontSize(18)
            .backgroundColor('#ffaaaa')
            .padding(10)

          // 内层条件
          if (this.toggleInner) {
            Text('内层条件为真')
              .fontSize(16)
              .backgroundColor('#00aaaa')
              .padding(8)
          } else {
            Text('内层条件为假')
              .fontSize(16)
              .backgroundColor('#aaaaff')
              .padding(8)
          }
        }
      }

      Row({ space: 10 }) {
        Button('切换外层条件')
          .onClick(() => this.toggleOuter = !this.toggleOuter)

        Button('切换内层条件')
          .onClick(() => this.toggleInner = !this.toggleInner)
      }
    }
    .width('100%')
    .height('100%')
    .padding(20)
    .justifyContent(FlexAlign.Center)
  }
}