本篇讲解鸿蒙 ArkUI 中的条件渲染机制分析 if-else 在日记应用中的多种使用场景。一、条件渲染概述在 ArkUI 声明式 UI 中if-else用于根据条件决定渲染哪些 UI 组件。当条件变化时框架会自动更新界面。二、基本语法2.1 单条件判断build(){Column(){if(this.isLoading){LoadingProgress().width(40).height(40)}}}2.2 if-else 分支build(){Column(){if(this.diaries.length0){// 空状态Text(暂无日记).fontSize(16).fontColor(#999)}else{// 正常列表List(){ForEach(this.diaries,(diary:DiaryInfo){ListItem(){this.DiaryCard(diary)}},(diary:DiaryInfo)diary.id)}}}}2.3 if-else if-else 多分支build(){Column(){if(this.statusloading){this.LoadingView()}elseif(this.statuserror){this.ErrorView()}elseif(this.statusempty){this.EmptyView()}else{this.ContentView()}}}三、日记应用中的条件渲染场景3.1 加载状态切换if(this.isLoading){Column({space:12}){LoadingProgress().width(40).height(40).color(#007DFF)Text(加载中...).fontSize(14).fontColor(#999)}.width(100%).height(100%).justifyContent(FlexAlign.Center)}else{Scroll(){Column(){this.DiaryContent()}}.layoutWeight(1)}3.2 编辑模式控制// 编辑模式下显示删除按钮if(this.isEditMode){Button(删除日记).width(90%).height(48).fontColor(#FF3B30).backgroundColor(#FFFFFF).borderRadius(12).onClick((){this.showDeleteConfirm()})}3.3 标签选中状态ForEach(this.weatherList,(item:WeatherItem){Text(item.label).fontSize(16).padding(8).borderRadius(20).backgroundColor(this.selectedWeatheritem.value?#007DFF:#F5F5F5).fontColor(this.selectedWeatheritem.value?#FFFFFF:#333333)})3.4 内容截断显示Text(diary.content).fontSize(14).maxLines(this.isExpanded?100:2).textOverflow({overflow:TextOverflow.Ellipsis})if(diary.content.length50){Text(this.isExpanded?收起:展开).fontSize(14).fontColor(#007DFF).onClick((){this.isExpanded!this.isExpanded})}3.5 日期格式条件显示if(this.isToday(this.diary.date)){Text(今天).fontSize(12).fontColor(#007DFF)}elseif(this.isYesterday(this.diary.date)){Text(昨天).fontSize(12).fontColor(#666)}else{Text(this.diary.date).fontSize(12).fontColor(#999)}四、条件渲染与三目运算符4.1 三目运算符用于属性值Text(item.label).backgroundColor(this.isSelected?#007DFF:#F5F5F5).fontColor(this.isSelected?#FFFFFF:#333333).fontWeight(this.isSelected?FontWeight.Bold:FontWeight.Normal)4.2 三目运算符 vs if-else// ✅ 使用三目运算符适合切换属性值Text(item.label).color(this.isSelected?#007DFF:#333)// ✅ 使用 if-else适合切换整个组件if(this.isSelected){Image($r(app.media.check)).width(16).height(16)}else{Blank()}选择原则场景推荐方式切换属性值三目运算符切换组件结构if-else多条件分支if-else if-else五、条件渲染的注意事项5.1 状态变量驱动条件渲染必须依赖State变量才能自动更新StateshowDetail:booleanfalsebuild(){Column(){Button(切换).onClick((){this.showDetail!this.showDetail// 修改状态触发更新})if(this.showDetail){Text(详细信息)}}}5.2 避免在 build 中做复杂计算// ❌ 不推荐build 中做复杂计算if(this.diaries.filter(dd.moodhappy).length0){Text(有开心的日记)}// ✅ 推荐使用计算属性StatehasHappyDiary:booleanfalseprivatecheckHappyDiary(){this.hasHappyDiarythis.diaries.some(dd.moodhappy)}5.3 条件渲染的销毁与重建// if 条件为 false 时组件会被销毁// 当条件变为 true 时组件会重新创建if(this.showEditor){TextArea({text:this.content}).onChange((value:string){this.contentvalue})}// 如果 showEditor 从 true → false → true// TextArea 会被销毁再重建之前输入的内容会丢失解决方案使用visibility属性代替条件渲染TextArea({text:this.content}).onChange((value:string){this.contentvalue}).visibility(this.showEditor?Visibility.Visible:Visibility.Hidden)六、Visibility 属性enumVisibility{Visible,// 可见Hidden,// 隐藏但占位None// 隐藏不占位}Column(){Text(标题)Text(副标题).visibility(this.showSubtitle?Visibility.Visible:Visibility.None)Text(内容)}Visibility vs if-else特性Visibility.Noneif-else组件销毁否保留在内存是完全销毁状态保留保留丢失性能占用内存释放内存适用场景频繁切换不常切换七、条件渲染实战模式7.1 页面状态机typePageStatusloading|success|error|emptyStatestatus:PageStatusloadingbuild(){Column(){if(this.statusloading){this.LoadingView()}elseif(this.statuserror){this.ErrorView()}elseif(this.statusempty){this.EmptyView()}else{this.SuccessView()}}}7.2 权限控制if(this.userRoleadmin){Button(管理后台).onClick((){this.goToAdmin()})}八、总结条件渲染的核心要点if-else用于切换组件结构条件变化时自动更新三目运算符用于切换属性值代码更简洁状态驱动条件必须依赖State变量Visibility需要保留状态时用visibility替代if-else避免复杂计算不在build中做复杂逻辑运算状态机模式多状态页面用状态机管理更清晰条件渲染是声明式 UI 的基础能力合理使用可以让界面逻辑清晰、性能高效。