大家好，我是杨利杰 YJlio。

页面暂时没有内容时，我首先想知道：它还在加载、已经加载失败，还是正常完成后确实没有数据？如果这几种情况都只留一片空白，用户看不出原因，排查时也容易混淆。

这节我用一个状态字段和四个文本分支练习条件渲染。本篇编号 019，计划日期为 2026 年 10 月 9 日。原稿已保留；下方页面代码是补充的学习示例，尚未在本机编译或设备运行。配图是概念示意。

一、先把四种状态说清楚

我先约定四个状态名称，不接网络、不准备列表，专注观察“状态与显示内容”的对应关系。

这些状态名称是本例自己的约定，并不是框架要求使用的枚举。以后接入真实业务时，需要根据实际处理结果决定状态。

加载中、加载失败和正常无内容，应当分别表达。

二、用 if、else if 和 else 选择显示分支

本例把 viewState 声明为 V1 的 @State 字段，初始值为 empty。Column 中的条件渲染读取该字段，再选择对应 Text。四个按钮放在分支之后，因此切换时仍能继续操作。

@Entry@Componentstruct Index{@StateviewState:string='empty';build(){Column({space:12}){if(this.viewState==='loading'){Text('加载中…')}elseif(this.viewState==='error'){Text('加载失败')}elseif(this.viewState==='empty'){Text('暂无内容')}else{Text('示例内容')}Button('显示加载').onClick(()=>{this.viewState='loading'})Button('显示错误').onClick(()=>{this.viewState='error'})Button('显示空态').onClick(()=>{this.viewState='empty'})Button('显示内容').onClick(()=>{this.viewState='content'})}.width('100%').padding(16)}}

当前示例只通过这四个按钮赋值，所以最后的 else 用于显示 content 对应文案。若以后从外部接收状态字符串，应增加合法值检查和未知状态处理，不能让任意字符串都被当作正常内容。

依据官方条件渲染文档，参与判断的观察状态变化会使条件重新评估。普通变量能参与条件判断，但不能据此推断修改普通变量也会自动更新页面。

三、加载中：操作未结束，不提前显示空态

loading 分支显示“加载中…”。它表达的是等待过程，而不是已经得到“没有数据”的结论。

这一节按钮只是手动改变 viewState，没有请求、计时器或后台任务。因此点击“显示加载”不会自己变成成功或失败。我需要再点击其他按钮，才能观察另一个分支。

以后接入异步操作时，应由完成、失败等实际结果更新状态；这里先练习显示关系，避免把模拟状态写成真实加载过程。

四、错误态：说明失败，不冒充正常无数据

error 分支显示“加载失败”。与 empty 的“暂无内容”相比，它表达的是处理失败，需要进一步查看错误原因。

本例没有实现重试按钮。实际业务如果要重试，必须重新执行对应操作，并处理再次失败的情况，不能只把文案改回“加载中…”就称为已经重试。

失败不代表正常无数据；错误态应保留能继续定位问题的线索。

五、空态：让用户知道页面为何没有内容

empty 是本例的初始状态，显示“暂无内容”。我先用一句明确文案替代空白屏幕，不急着添加插画、跳转入口或推荐内容。

在真实页面里，“暂无记录”和“搜索无结果”可能需要不同说明。文案要跟实际场景一致，这节的“暂无内容”只是练习用的通用文本。

原稿中的 describeResult 函数依据字符串是否为空返回不同文案，它说明的是普通计算逻辑。这里补充的是 ArkUI 在 build 中按状态创建不同界面分支，两者不能直接当作同一种实现。

六、内容态：先用纯文本核对分支

content 状态显示“示例内容”。我没有在这节加入 ForEach、业务记录或数据库数据，先保证四种状态与四段文案逐项对应。

这能减少排查范围：如果点击“显示内容”仍看到“暂无内容”，先检查事件和 viewState，而不是去查列表 key 或网络返回值。

条件渲染也不是简单把所有分支一直放在页面中再遮住。官方文档说明，分支变化会移除旧分支构建的子组件，再构建新分支。因此以后如果分支内包含自定义组件，不应默认它的内部状态一定会跨切换保留。

七、用四个按钮观察切换路径

按钮顺序为“显示加载”“显示错误”“显示空态”“显示内容”，每个按钮只修改 viewState。它们位于条件分支外，不承担网络请求或数据处理职责。

我准备先按顺序点击，再返回前一个状态，检查当前文案是否与状态值一致。这个顺序是验证步骤，不代表业务必须从加载态依次经过错误态、空态才到内容态。

状态名称、事件赋值和显示分支，三处要保持对应。

如果显示没有变化，我会依次检查按钮是否执行、写入字段是否正确、字段是否受观察，以及条件中是否存在拼写差异。所有状态名区分大小写。

八、逐个状态留下真实记录

我把预期结果列出，实际验证栏留空。只有完成编译、运行和操作记录后，才能把“预期显示”改成“本次观察到”。

环境记录包括实际 DevEco Studio、工程 SDK/API、运行设备与窗口。若出现问题，保留完整编译诊断、操作顺序和修改前后差异。

代码使用 @Component 与 @State 的 V1 写法；若工程采用 V2，应按对应模板适配。学习系列名称不代表本例已通过某个 SDK 版本的编译验证。

写在最后

这节我先把“页面没有内容”拆成可解释的状态，再让每个状态有对应的显示分支。代码很小，但能帮助区分等待、失败和正常无内容。

下一篇继续学习列表点击与事件处理。等状态显示关系确认后，再接入真实列表和异步数据，出现问题时也更容易确定是哪一步出了差异。

参考资料

1. OpenHarmony 官方文档：if/else 条件渲染，用于核对条件语句与分支更新机制；实际 HarmonyOS 工程请查对应 SDK 文档。
2. 本系列第 019 篇原稿：《条件渲染与空页面处理》，计划日期 2026-10-09。

声明：本文为个人学习笔记，代码与概念配图用于说明思路；尚无本机编译或设备运行记录，不将按钮模拟状态当作真实网络或数据处理结果。

返回顶部