说起来，

一、

在鸿蒙应用开发中。条件渲染是主要功能之一。它让你能够根据 @State 状态值动态决定界面上哪些组件出现或隐藏。按理说，最常见的做法是 “如果满足某个条件。就渲染这个 UI”，否则渲染别的 UI。

很多同学在刚接触时会遇到：为什么状态改变后 UI 没有刷新？或者 为什么三元表达式写错了就报错？

二、项目目标与效果预览

我们将实现一个简单的红绿灯模拟：

• 初始状态: 红灯亮起，显示“停”。
• 使用者交互: 点击“切换信号”按钮。
• 动态效果: 灯光循环切换为 红 → 绿 → 黄 → 再回到红 …

通过这个例子，你直接能看到两种常用条件渲染语法：@Builder + if/else 与三元表达式。

从使用者痛点一来看，状态变量不更新导致 UI 不刷新的困扰

如果把普通变量写成 @State count = 0;,那么每次点击按钮后 UI 就不会重新绘制。原因是 ArkUI 的响应式程序只监听装饰器标记过的属性。

至于使用者痛点二。三元表达式位置错误导致编译报错 “Only UI component syntax can be written here.”

三元表达式必须嵌入到组件调用链中，而不是单独作为语句出现。稍微误操作就会报错，导致调试变得非常繁琐。

三、基础准备：创建状态变量

关键点： @State 必须标记在类属性上；初始值可随业务需要设定，

@State
count这方面，number = 0;// 初始为红灯

四、条件渲染主要语法一：@Builder 与 if/else

适用场景： 多分支逻辑，代码结构清晰易维护。

@Builder 定义灯光块

@Builder
RedLight {
Column({
从space来看，'20dp'
}) {
Circle
.width
.height
.fill;Text
.fontSize
.fontColor;}
}
@Builder
GreenLight {
Column({
space的观点是，'20dp'
}) {
Circle
.width
.height
.fill;Text
.fontSize
.fontColor;其实，}
}
@Builder
YellowLight {
Column({
从space来看。'20dp'
}) {
Circle
.width
.height
.fill;Text
.fontSize
.fontColor;}
}

主 build 方法中的 if/else 分支

build {
Column({
至于space。'20dp',justifyContent: FlexAlign.Center,alignItems: FlexAlign.Center
}) {
// 哪一盏灯
if { // 红灯
this.RedLight;} else if { // 绿灯
this.GreenLight;} else { // 黄灯
this.YellowLight;}
Divider.strokeWidth.marginTop;Button
.width
.height
.onClick => {
this.count++;// 改变状态，自动触发重绘
console.log;})，Text
.fontSize
.fontColor;}
}

小贴士这方面，

• No logic inside Builder blocks. 所有业务逻辑应放在事件回调或生命周期函数里保证 Builder 块只负责声明视图。
• @State 必须被正确修改. 直接赋值即可，例如 this.count++;.
• Avoid hard‑coding magic numbers. 最好把“红=0、绿=1、黄=2”的映射抽成常量，以便维护。

五、条件渲染主要语法二：三元表达式

适用场景： 仅两种情况需要切换时使用，例如显示文字提示或颜色切换。

三元表达式语法示例

// 在 Text 的文本参数中使用三元表达式：
Text
.fontSize
.fontColor;

Error 用例： ❌ 错误写法

build{
Column{
Text.fontSize:
Text.fontSize;不过，// ❌ 报错 Only UI component syntax can be written here.
}
}

• . 控制文本内容: 如上所示。将表达式直接放入 Text.
• . 控制组件属性: 也可用于设置颜色、大小等样式链。老实说，再看例如，ts Text.fontColor.backgroundColor;

  小贴士

  • 三元表达式只能嵌入 UI 构造链 内部；不能单独写为语句，按理说，
  • 当分支增多时请改用 if/else 或 switch保持代码可读性。

  ---

  从使用者痛点三来看。混淆了 @Builder 与直接写函数的区别

  很多人误以为可以把 Builder 写成普通方法并直接返回 JSX，但这样会失去响应性和复用性。说到正确做法是，

  ts @Builder MyComponent{ /*...*/ }

  ---

  六、关键注意事项与常见错误

  #	常见错误	正确做法
  1	在 Builder 块内部执领域务逻辑	把逻辑放进事件回调或生命周期函数
  2	忘记给状态变量加 @State 装饰器	确保所有需要驱动 UI 的变量都标注 @State
  3	三元表达式写在 块外部	嵌入到组件属性链内部。如 Text
  4	使用普通数字硬编码，而不是常量	建议定义枚举或 const 对象映射，例如 { RED:'red',GREEN:'green',YELLOW:'yellow' }

  小结

  • if/else + @Builder适合多分支复杂布局，可复用 Builder。
  • 三元表达式简洁，仅限两选一场景。
  • 所有业务逻辑应放在事件处理器里避免在渲染块内执行。

  ---

  七、完整示例代码

  以下代码已完整整理，可直接粘贴到 并运行。

  ts import { Component } from '@ohos/hmfs';import { @Entry } from '@ohos/hmfs';import { @Component } from '@ohos/hmfs';怎么说呢，

  @Entry @Component export default class TrafficLightPage extends Component {

  @State private count:number = 0;

  /** -------------------- Builder 定义 -------------------- */ @Builder RedLight { Column { Circle.width.height.fill;Text.fontSize.fontColor;} }

  @Builder GreenLight { Column { Circle.width.height.fill;Text.fontSize.fontColor;其实，} }

  /** -------------------- 主 Build -------------------- */ build{ Column({ 从space来看，'25dp',justifyContent: FlexAlign.Center。alignItems: FlexAlign.Center,width:'100%',height:'100%' }){

   /* ---------- 条件渲染 ---------- */
  if { this.RedLight;}
  else if { this.GreenLight;}
  else{ this.YellowLight;}
  /* ---------- 三元表达式演示 ---------- */
  Divider.strokeWidth.marginTop;Text
  .fontsize
  .foncolor;Button
  .width
  .height
  .onClick=>{ this.count++;})，/* ---------- 状态展示 ---------- */
  Text
  .fontsize
  .foncolor;}，

  };}

  运行后你将看到：

  • 灯光按顺序循环；
  • 按钮能实时改变状态；
  • 文本提示与字体颜色随状态变化。

  ---

  通过这个红绿灯示例，你已经掌握了鸿蒙 ArkTS 条件渲染的两大主要工具：

  1. @Builder + if/else —— 多分支清晰可维护；
  2. 三元表达式 —— 简洁二选一快速实现。

  主要理念是状态驱动视图;一旦你习惯于把业务逻辑放进事件回调，管理 <@State> 就能让 UI 自动跟随变化而更新。

  接下来可以尝试将这套思路与 循环结合，实现更复杂的数据列表展示；或者将不同信号组合成更丰富的交通信号程序。怎么说呢，祝你玩得开心，也欢迎继续交流讨论！