HarmonyOS ArkUI 综合实践用四张验收卡组织页面状态与反馈写在前面很多所谓的“综合实践页面”容易把内容堆在一起上面放几个指标中间塞一组按钮下面再补一段说明最后页面看起来很满却很难让人理解每一项信息之间的关系。一个真正有用的综合页面不一定要接入复杂服务也不一定要展示大量数据。只要它能够把几个相互关联的阶段组织清楚让用户知道当前有哪些事项、每项事项是什么状态、点击以后会看到什么结果就已经具备了很好的信息整理价值。本文讨论的页面就是这样一个小而完整的例子。打开页面后最上方是蓝色标题栏标题为“综合实践”。主体区域显示“项目交付看板”和“从性能、质量到发布的全流程检查结果”两行说明。下面排列四张验收卡分别是“启动性能”“渲染质量”“工程规范”和“发布版本”。每张卡片都有自己的符号、颜色、标题、辅助文字和“查看”提示。点击卡片后辅助文字会切换为对应的验收结果卡片背景变成浅蓝色右侧的“查看”变成“收起”底部提示也会同步显示当前已经记录的模块。再次点击当前卡片卡片恢复收起状态底部文字也回到等待选择的提示。这个页面的价值不在于它完成了真正的性能采样、数据库分析或应用发布而在于它把“综合检查结果”这件事做成了一个容易理解的交互模型。四项内容是固定展示的点击只负责查看和收起结果没有网络请求没有真实设备协同也没有后台任务。正因为边界清楚页面很适合用来学习 ArkUI 中的状态驱动、列表渲染、卡片布局和即时反馈。一、先看懂这个页面在解决什么问题页面解决的问题可以概括为一句话把四类交付检查结果放在一个可以逐项查看的看板中。这里的“看板”不是一个可以编辑数据的管理后台也不是一套会自动运行的质量平台它更像是一个结构化的结果展示页。用户先看到四项检查的名称想了解哪一项就点击哪一项看完之后可以收起继续查看其他项。这种交互顺序很适合信息量不大、但每项说明又不能全部同时展开的场景。如果四项详细结果一开始就全部显示页面会出现大段文字卡片之间的重点不容易区分。现在的页面采用“名称先展示、结果按需展开”的方式初始画面保持简洁用户又不会因为缺少入口而找不到结果。四项卡片的命名也有明确的先后关系。第一项“启动性能”关注应用打开阶段的速度第二项“渲染质量”关注页面显示过程中的流畅程度第三项“工程规范”关注静态检查和规范性第四项“发布版本”关注版本、签名和发布配置。它们从运行体验逐步过渡到交付准备构成了一条从性能到发布的检查链路。页面并没有让用户输入检查参数也没有提供重新检测按钮因此这些文字应该理解为已经准备好的演示结果而不是运行时计算出来的实时数据。从用户角度看页面有三个明显区域。第一是顶部标题区域负责告诉用户当前页面的主题。第二是中间的卡片区域负责承载四项检查内容。第三是卡片下方的状态提示区域负责告诉用户当前是否选择了卡片以及已经记录了哪一项验收结果。三个区域各司其职用户不需要阅读长篇说明就能知道如何操作。二、初始状态为什么重要首次进入页面时没有任何卡片处于展开状态。四张卡片都使用白色背景卡片内部的辅助文案统一显示为“点击查看该模块的验收结果”右侧统一显示“查看”。页面底部则显示“选择一个卡片查看综合实践的验证数据。”这组初始文案共同表达了一个意思当前还没有选择模块用户可以从任意一张卡片开始。初始状态的设计看似简单其实决定了页面的第一印象。如果页面一打开就显示某一张卡片的详细结果用户可能误以为这个模块是默认重点如果底部没有任何说明用户也不一定知道卡片可以点击。当前页面把四张卡片保持同等视觉地位同时用统一的“查看”文字提示交互入口降低了理解成本。从状态模型来看页面只需要记住一件事当前选中的是哪一张卡片。没有选择时可以用一个特殊值表示“没有选中项”选择第一张、第二张、第三张或第四张时则分别记录对应位置。这个模型非常适合单选展开场景因为页面同一时间只需要显示一个详细结果。它不需要为四张卡片分别维护四个布尔值也不需要担心出现两张卡片同时展开的问题。单一选中值还有一个好处就是底部反馈可以直接根据这个值判断显示内容。没有选中项时显示引导文字有选中项时拼接“已记录”和当前模块名称。卡片自身也使用同一个值判断背景色、辅助文案和右侧操作文字。这样一来页面中多个位置的显示结果都由同一个事实驱动卡片和底部提示不会出现互相矛盾的情况。初始状态还体现了一个很实用的原则没有必要为页面没有发生的事情提前制造反馈。用户没有点击任何模块时底部只需要告诉他下一步可以做什么不需要显示“尚未完成”“无数据”或“加载失败”。因为这里没有加载过程使用过于复杂的状态词反而会让一个简单页面显得沉重。三、四张卡片各自表达什么1. 启动性能卡片第一张卡片的标题是“启动性能”使用蓝色的上升符号作为视觉标记。收起时用户只看到模块名称和“点击查看该模块的验收结果”。展开后辅助文字变为“冷启动耗时 1.32s优于目标 2.00s”。这句话包含两个信息一个是当前展示的耗时一个是用于比较的目标值。把两者放在同一行用户不需要额外计算就能理解“优于目标”的含义。这张卡片在视觉上使用蓝色和顶部标题栏的蓝色形成呼应。蓝色通常给人稳定、清晰、可追踪的感觉用来表示性能指标并不突兀。卡片的符号不是一个复杂图表也不是实时变化的仪表盘只是一个小型的方向性标记。因此文章阅读时应把它看作信息分类图标而不是把它理解为真实的性能趋势图。点击后卡片背景变成浅蓝色右侧文字由“查看”变为“收起”。这两个变化会同时发生明确告诉用户当前卡片已经展开。底部提示也会变成“已记录启动性能 验收完成”。这里的“已记录”来自页面的演示文案代表当前卡片被选中并展示结果并不意味着系统刚刚执行了一次新的冷启动测试。2. 渲染质量卡片第二张卡片的标题是“渲染质量”使用紫色的圆形符号。展开后显示“掉帧率 0.8%页面响应稳定”。它关注的是页面呈现过程中的稳定性和第一张卡片的启动耗时形成区分第一张描述打开阶段的速度第二张描述使用过程中的响应表现。紫色让第二张卡片在四项内容中具有清晰的辨识度。即使用户不逐字阅读也能通过颜色和图标大致判断自己正在查看哪一项。需要注意的是当前页面只展示固定的掉帧率和一句稳定性说明没有绘制帧率曲线、没有采样按钮也没有随着滑动或动画实时刷新数据。因此它的交互重点是“展开结果”而不是“操作性能测试”。如果用户先点击第一张再点击第二张第一张会恢复收起第二张成为唯一展开项。这个变化符合单选卡片的预期。底部提示也会从第一项切换为第二项始终跟随当前卡片。这种交互让用户可以快速比较四项内容但不会让页面同时出现多个详细段落。3. 工程规范卡片第三张卡片的标题是“工程规范”使用绿色的对勾符号。展开后显示“静态检查 0 阻塞问题规范通过”。这项内容强调的是交付过程中对代码和工程规则的检查结果。它不像启动耗时或掉帧率那样是一个纯数字也不是一个需要用户输入的配置而是一种状态结论当前没有阻塞问题规范检查通过。绿色和对勾在视觉语言上很容易被理解为通过、完成和安全。卡片未展开时用户先看到模块名称展开后才看到“0 阻塞问题”的具体说明。这样做避免了首页一开始出现太多结论同时保留了足够明确的反馈。这张卡片特别适合说明“显示结果”和“执行检查”的区别。页面写着静态检查通过但页面本身没有提供执行静态检查的入口也没有显示检查过程。因此它只能被视为已准备好的示例数据。文章在介绍它时应聚焦于文案如何被展示、卡片如何响应点击、状态如何同步而不能把它写成具备真实代码扫描能力的工具。4. 发布版本卡片第四张卡片的标题是“发布版本”使用橙色的方形符号。展开后显示“v1.2.0 已完成签名与发布配置”。它代表检查链路的最后一环内容从运行质量延伸到版本交付。橙色让它在视觉上和前三项区分开用户可以快速定位到发布相关的信息。这张卡片的文案中包含版本号和配置状态但页面没有输入版本号的表单也没有执行签名的按钮。用户点击卡片之后只是看到这句话卡片进入选中状态底部显示对应的记录信息。因此它可以帮助学习者理解如何展示发布状态却不等于应用完成了真实签名、打包、上传或审核。四张卡片放在一起时用户能够从“启动性能”一路看到“发布版本”形成较完整的交付叙事。每张卡片只负责一个主题标题、符号和颜色共同帮助用户区分内容详细结果则在点击后出现。对于一个综合实践展示页来说这种信息架构比在一个大段落中混写所有结果更容易阅读。四、卡片点击后的状态变化点击卡片后变化并不是只有一处文字。页面至少有四种可见反馈会一起变化卡片背景、卡片辅助文案、右侧操作文字和底部状态提示。多个区域共同变化才能让用户确认自己的操作已经生效。第一种变化是背景。未选中的卡片保持白色与浅灰色页面背景形成轻微对比当前卡片变成浅蓝色选中范围非常直观。第二种变化是辅助文案由统一的引导句替换为当前模块的详细结果。第三种变化是右侧操作提示“查看”变成“收起”它让用户知道再次点击会关闭当前详情。第四种变化是底部提示由“选择一个卡片……”变成“已记录模块名称 验收完成”。这四个反馈没有引入弹窗、Toast 或复杂动画而是直接在当前页面内完成。对于这样的看板原位更新比弹出层更合适。用户查看的是一组持续存在的卡片详情附着在卡片上显示关闭以后也回到原来的位置不会打断阅读路径。如果点击已经展开的卡片页面进入没有选中项的状态。当前卡片恢复白色辅助文案恢复引导句右侧恢复“查看”底部恢复选择提示。这种行为可以理解为一个简单的开关第一次点击打开第二次点击关闭。它比另外放置一个“关闭全部”按钮更节省空间也让卡片本身承担了完整的操作入口。如果点击另一张卡片页面不会先进入空白状态而是直接把选中位置切换到新卡片。旧卡片收起新卡片展开底部提示随之改变。对于用户来说这是连续浏览不同模块最顺手的路径。它也说明页面把“当前选中项”当成一个互斥状态而不是给每张卡片保存独立的展开开关。五、页面布局带来的阅读节奏页面最外层采用从上到下的结构。顶部蓝色标题栏固定占据视觉起点下面是内容区域。内容区域先放标题和副标题再放四张卡片最后放底部提示。这个顺序符合用户阅读信息的自然节奏先知道页面主题再知道看板用途然后查看具体模块最后获得当前操作反馈。标题“综合实践”使用较大的白色粗体字放在蓝色背景上形成明显的页面头部。标题栏的高度和内边距让文字不至于贴近边缘也给页面建立了稳定的起点。它没有额外放返回按钮、菜单按钮或头像因此注意力集中在页面内容本身。“项目交付看板”是内容区域的主标题字体比副标题大承担第二层信息层级。下面的“从性能、质量到发布的全流程检查结果”使用较小的灰色文字解释四张卡片的共同主题。两行文字之间的字号、粗细和颜色差异帮助用户快速分辨标题与说明。四张卡片之间保持统一间距。每张卡片的内边距让图标、文字和右侧操作提示之间有足够呼吸空间。左侧图标占据固定宽度中间内容区域使用剩余空间右侧操作文字保持靠右排列。这样的布局使四张卡片拥有相同的结构即使标题长度不同也不会让操作入口在水平方向上来回跳动。卡片使用圆角和白色背景和页面浅灰色背景形成卡片式层次。选中后只改变背景颜色不改变卡片尺寸也不突然增加边框或阴影因此页面不会因为展开某一项而发生明显跳动。辅助文案长度变化时卡片仍然保持自己的布局节奏用户可以顺着同一列继续浏览。底部提示使用浅色背景和圆角位于卡片列表之后。它不是一个按钮不需要点击也不承担新的业务动作。它的作用是把当前状态用一句话总结出来。未选择时它承担引导作用选择后它承担确认作用。这种位置固定的摘要反馈能够让用户不必回头查看卡片右侧文字也能知道当前页面记录了什么。六、颜色和符号怎样辅助理解四张卡片分别使用蓝色、紫色、绿色和橙色颜色不只是装饰也承担分类作用。蓝色对应启动性能紫色对应渲染质量绿色对应工程规范橙色对应发布版本。它们没有使用同一种颜色来表达所有内容从而让页面在视觉上形成四个清晰的节点。图标同样采用简单的字符符号。第一张卡片的上升符号表达性能方向第二张卡片的圆形符号表达渲染过程第三张卡片的对勾表达通过第四张卡片的方形符号表达版本或交付标记。符号尺寸比正文略大放在卡片左侧用户可以先看到视觉标记再阅读标题。选中卡片时蓝色背景并不会覆盖原来的图标颜色图标依然保留自己的分类色。这样既强调了选中态又不会破坏四项内容之间的区分。右侧“查看”和“收起”都使用蓝色表示它们是同一类操作入口底部提示使用深灰色避免与卡片操作文字竞争视觉注意力。页面整体背景采用浅灰色未选中卡片采用白色底部提示采用更浅的中性色。三种背景之间的差异不强烈却足以形成区域层次。对于一个以信息浏览为主的页面这种克制的颜色关系比大面积高饱和色更耐看也更适合阅读详细结果。颜色使用还传递出一种状态优先级。卡片的主题色是分类线索浅蓝色是当前选中线索底部深灰色是辅助说明线索。用户即使不研究页面细节也可以通过这些颜色关系理解“哪个模块、是否选中、当前摘要是什么”。七、为什么只需要一个选择状态这个页面最值得学习的地方之一是用一个选择位置就能控制整个交互闭环。四张卡片是固定数据页面不需要为每项结果单独保存编辑内容。用户的操作只有两类选择一个没有展开的卡片或者收起当前已经展开的卡片。因此状态模型可以保持非常小。状态值表示当前卡片的位置。特殊的初始值表示没有选中点击某项后记录它的位置再次点击同一项则回到没有选中的状态点击不同项则直接替换为新的位置。这个变化过程很容易画成一条简单的状态路径也很容易在调试时复现。如果采用四个布尔变量分别表示四项是否展开就必须额外处理多个变量同时为真的情况。例如用户先打开第一项再打开第二项第一项是否自动关闭如果忘记同步更新就可能出现两项同时展开。单一选择值天然保证了互斥性减少了状态组合数量也让页面意图更加明确。状态少并不代表页面没有交互。相反正是因为状态职责单一卡片的所有变化都能被清楚解释。背景颜色、辅助文字、操作文字和底部提示都依赖当前选择值没有其他隐藏条件。用户操作与页面结果之间的关系比较直接适合初学者理解声明式 UI。单一状态还让页面具备较好的可扩展空间。如果将来需要加入“上次查看时间”可以再增加一个与时间相关的状态如果需要允许多选展开则应重新设计状态模型而不是简单地在当前值上打补丁。当前页面的实现没有假装支持多选这种边界反而更健康。八、列表渲染与固定数据的关系四张卡片虽然内容不同但结构高度一致图标、名称、结果说明和操作提示的位置相同。这样的内容适合通过列表渲染方式重复生成而不是为每一项分别写一套布局。列表渲染让页面结构保持统一也减少了四份相似布局之间出现差异的机会。固定数据包含四个名称和四条详细结果它们按照相同下标一一对应。第一个名称对应第一条结果第二个名称对应第二条结果以此类推。页面展示时再根据当前选中位置取出对应文本。对于数据量只有四项的演示页面这样的对应关系很直观。列表渲染并不等同于懒加载也不意味着页面有大量数据。当前只有四张卡片使用普通的重复渲染足够完成任务。文章不应该把这个页面描述成拥有复杂列表分页、长列表缓存或大数据优化能力因为源码和页面都没有这些内容。准确表达实现范围往往比堆砌更多技术名词更有价值。在视觉上列表渲染带来的最大好处是“一致”。四张卡片的宽度、边距、圆角、内部间距和右侧操作位置都保持相同。即便未来修改某张卡片的结果文字也不会影响其他卡片的结构。对于综合看板来说统一的阅读节奏比每项都做不同样式更容易让人比较。九、从用户操作到页面反馈的完整过程可以把一次操作拆成几个连续步骤。首先用户浏览四张卡片看到四个模块都处于收起状态。其次用户点击感兴趣的卡片。然后页面把当前卡片标记为选中改变该卡片的背景和文字并在底部显示确认信息。最后用户可以再次点击同一项收起或者点击另一项切换查看。以“工程规范”为例用户第一次看到的是模块标题和“点击查看该模块的验收结果”。点击后卡片变成浅蓝色辅助文案出现“静态检查 0 阻塞问题规范通过”操作文字变成“收起”底部出现“已记录工程规范 验收完成”。这四处反馈共同说明当前动作已经生效。如果用户再次点击“工程规范”卡片回到白色详细结果隐藏操作文字恢复为“查看”底部恢复“选择一个卡片查看综合实践的验证数据”。页面没有保留一个模糊的半展开状态也没有把上一次查看内容显示到其他位置。收起操作的结果是完整、可预测的。如果用户随后点击“发布版本”系统直接把选择位置改为发布版本。工程规范卡片收起发布版本卡片展开底部提示同步更新。用户不需要先手动关闭旧卡片减少了操作步骤。这种切换方式特别适合四项内容之间的横向浏览。页面所有反馈都是同步的文字和颜色变化不存在异步加载中的中间状态。因此不应当在文章中虚构加载动画、网络失败、重试按钮或后台任务。页面的真实重点是状态改变之后 UI 如何立即呈现而不是复杂业务流程。十、页面做了什么页面没有做什么页面已经做好的部分包括展示综合实践标题展示看板说明展示四张固定卡片使用不同颜色和符号区分模块点击卡片查看具体结果再次点击收起结果切换卡片时保持单项展开以及在底部显示当前状态摘要。这些行为都能在页面上直接观察到。页面没有做的部分同样需要说清楚。它没有真正测量冷启动耗时1.32 秒只是展示文案它没有进行掉帧采样0.8% 也只是固定结果它没有调用静态检查工具0 阻塞问题属于看板内容它没有执行签名或发布操作v1.2.0 只是版本状态说明。页面也没有连接网络、读取设备数据、保存用户记录或生成报告。这些限制并不降低页面的学习价值。对于学习 ArkUI 的开发者来说一个小页面完全可以用来理解页面分层、重复渲染、状态驱动和视觉反馈。关键是把演示数据与真实能力区分开知道当前能观察到什么、不能由页面推导出什么。这样写文章时不会把静态展示误读为完整业务系统。如果未来要把它扩展成真正的交付看板需要补充数据来源、执行状态、异常状态和持久化方式。例如性能结果应来自可重复的测试流程渲染指标应来自实际采样规范结果应来自检查工具发布状态应来自构建和签名流程。但这些都属于后续产品设计不是当前页面已经完成的功能不能在介绍当前页面时混写。十一、适合初学者的 ArkUI 学习要点这个页面很适合用来理解声明式 UI。传统的命令式界面通常需要开发者找到具体控件再逐个修改文字、颜色和可见性。声明式界面则是先描述“没有选中时应该是什么样子”“选中第几张时应该是什么样子”用户操作只改变状态界面根据状态重新呈现。以卡片为例未选中时使用白色背景选中时使用浅蓝背景未选中时显示引导句选中时显示详细结果未选中时显示“查看”选中时显示“收起”。这些都是同一个状态在不同 UI 属性上的表现。开发者不需要额外维护“是否已经修改过背景”“是否已经替换过文案”等标记减少了界面和数据不一致的可能。列表渲染则展示了“数据决定结构”的思路。四个模块名称和四条结果数据决定了卡片的内容卡片的布局结构保持不变。增加或修改某个模块时主要调整数据不必复制一份新的布局。即便当前数据固定这种结构也为今后的扩展留出了方向。点击事件展示了最小化事件处理的思路。一次点击只需要改变当前选中项其他视觉变化由页面根据选中项自动决定。事件回调不需要直接寻找文字控件也不需要手动调用刷新方法。对于刚开始学习 ArkUI 的开发者来说这个模式能够帮助理解“状态是源头UI 是结果”。页面还说明了一个重要的设计原则反馈要靠近操作。用户点击卡片后卡片本身立刻变色并展开结果底部又补充一条摘要。反馈既出现在用户操作的位置也出现在页面统一的状态区域。这样用户不会因为只改变了某个细节而怀疑操作是否成功。十二、细节体验如何保持稳定卡片的结构比较简单但仍有一些细节值得注意。首先是点击区域。卡片的整行都可以作为点击入口而不是只有右侧“查看”文字可以点击。这样更符合移动端操作习惯用户点到标题、图标或空白区域都能完成预期动作。其次是文字层级。模块名称使用更大的字体和较重的字重帮助用户快速扫读详细结果使用较小的灰色文字承载具体信息右侧操作提示使用蓝色强调它是可以执行的动作底部提示使用深灰色作为页面摘要。不同文字的职责清晰页面不需要额外的分隔线来解释结构。再次是颜色的克制。未选中卡片没有使用强烈边框选中时只增加浅蓝背景避免视觉跳动。四个分类色用于左侧符号不会大面积铺满卡片。这样的色彩使用保持了页面的安静感用户可以把注意力放在标题和结果文字上。最后是收起后的恢复。好的交互不仅要考虑打开还要考虑关闭以后是否回到明确的原始状态。当前页面收起时会恢复卡片背景、辅助文案、操作文字和底部提示用户不会看到残留的旧结果。这种完整的恢复让页面状态更容易理解也更容易重复验证。十三、四项内容如何构成一条交付叙事单独看四张卡片它们只是四条结果放在同一个页面里就形成了从应用体验到版本交付的叙事。启动性能告诉用户应用打开得是否足够快渲染质量告诉用户页面运行是否稳定工程规范告诉用户内部质量是否达到要求发布版本告诉用户交付物是否已经准备好。这条叙事并不是一个真正的自动化流水线因为页面没有执行步骤、进度计算或失败分支。它是用固定结果把几个常见的检查主题组织起来。对于演示和教学而言这种组织方式已经足够让用户理解一个应用交付通常需要关注哪些方面。标题“从性能、质量到发布的全流程检查结果”也承担了串联作用。它没有把四项内容说成互不相干的功能而是告诉用户它们共同属于交付检查。卡片名称又把范围缩小到具体模块用户可以从总览进入细节再回到整体摘要。底部“已记录”文案则让交互拥有了一个轻量的记忆感。这里的记录只表示当前选择被页面展示出来不是写入数据库也不是保存到本地。准确理解这个词的上下文很重要页面把当前状态用文字记录在界面上而不是完成真正的审计记录。十四、如何正确理解固定结果文案页面中四条详细结果都采用了比较肯定的表达“优于目标”“页面响应稳定”“规范通过”“已完成签名与发布配置”。这种文案适合演示成功状态但也会让读者误以为页面背后有真实检查逻辑。因此阅读时应把它们分成两层理解。第一层是产品文案层。它们告诉用户页面想展示什么结果帮助用户熟悉成功状态应该如何呈现。第二层是技术实现层。当前页面没有执行相应任务结果来自固定数组中的字符串。文章可以分析文案与卡片的对应关系但不能声称页面会自动测量、扫描、签名或发布。固定文案还有一个优点就是运行结果稳定。每次打开页面四项内容都以同样的初始状态出现点击同一张卡片看到的文字也一致。这对于学习和截图验证很方便。用户可以专注于观察状态变化不需要等待外部服务也不需要准备特殊环境。如果将来接入真实数据固定文案需要被加载中、成功、失败和空数据等状态替代。但这会带来更多状态组合也需要处理网络异常和数据更新时间。当前页面刻意保持简单正好可以作为接入动态数据之前的界面骨架。十五、从当前页面可以延伸哪些思考虽然不能把没有实现的功能写成已有能力但可以从现有交互提出设计思考。比如若四项检查都来自真实任务页面是否需要显示最近检查时间如果某项检查失败卡片是否需要红色状态和重试入口如果用户需要查看多项详情是否应该支持多选展开这些问题都可以帮助开发者继续设计但它们属于扩展方向不是当前页面的事实。当前页面的单项展开模型也提供了一个取舍案例。单项展开适合快速浏览和保持页面紧凑多项展开适合需要同时对照多项结果的场景。选择哪一种取决于信息长度和用户任务。当前四条结果都很短单项展开已经足够如果结果变成多行日志多项展开可能会让页面滚动距离明显增加。底部摘要同样有扩展空间。当前只有一条状态文字未来可以展示已查看数量例如“已查看 2/4 项”。但如果加入数量就需要额外记录用户曾经查看过哪些卡片而当前页面只记录当前选中项。这个差异说明产品需求变化会直接影响状态模型不能只改一处显示文字就认为功能完成。四种颜色也可以发展成统一的状态体系但当前颜色表示的是模块分类不是成功、失败或警告。未来如果添加失败状态应该同时考虑分类色和结果色之间的关系避免用户误把蓝色理解成成功、绿色理解成工程规范专属。设计规则需要在功能扩大时重新评估。十六、实际阅读和操作时可以观察什么打开页面后可以先观察顶部标题栏与浅灰色背景的对比确认页面具有明显的头部和内容区域。然后观察四张卡片是否保持相同宽度、圆角和间距再注意四个符号的颜色是否可以帮助区分模块。初始状态下四张卡片的辅助文字应保持一致底部提示应提示选择卡片。点击第一张卡片观察卡片是否变成浅蓝色辅助文案是否出现启动耗时右侧文字是否变成“收起”底部提示是否显示启动性能。点击第二张卡片观察第一张是否恢复白色第二张是否展开底部是否改成渲染质量。点击已经展开的卡片观察页面是否回到初始状态。继续操作第三张和第四张卡片可以看到它们的详细结果分别围绕工程规范和发布版本。这个过程不需要输入也不需要等待。每次点击都应产生清晰、可预测的视觉和文字反馈。如果出现两张卡片同时保持选中或者底部提示与展开卡片名称不一致就说明状态关联存在问题。除了点击还可以观察不同文字长度对卡片布局的影响。启动性能的结果包含两个时间数字渲染质量包含百分比发布版本包含版本号它们的字符长度不同但卡片结构仍应保持稳定。右侧的操作文字应该继续位于卡片行的右端中间文字区域负责吸收可用空间。十七、页面边界与文章表达边界介绍这个页面时最重要的是把“页面展示”与“真实业务”分开。页面展示了四项结果文章可以详细解释每项文字、颜色和交互但页面没有提供真实测试入口文章不能把固定文字扩写成性能采集系统。页面可以作为交付看板的 UI 原型文章可以讨论原型怎样组织信息但不能把原型的静态结果描述成已经接入流水线。同样页面有“发布版本”卡片并不等于它能完成发布。页面显示了版本号和签名配置文案但没有打包、签名、上传、审核或安装流程。页面有“工程规范”卡片也不等于它能运行静态检查。文章应当把这些内容作为状态展示和信息架构来讲不要加入读者无法在页面中复现的能力。边界写清楚并不会让文章变得单薄反而能让读者知道自己实际学到了什么。读者可以学到如何把四项固定数据渲染成统一卡片如何用一个选中值控制展开与收起如何用颜色和图标建立分类如何在底部给出摘要反馈。这些知识都是真实、可复现、可迁移的。十八、一个小页面带来的工程启发综合页面不一定要包含很多功能关键是信息结构要完整。当前页面没有输入框、列表编辑、网络请求或复杂动画却仍然具备清晰的标题、说明、模块、详情和状态摘要。它说明界面价值不完全由功能数量决定也取决于用户是否能快速理解页面。状态设计也不一定越多越好。一个选择位置就足以控制四张卡片的展开和收起状态数量少页面行为反而更容易预测。对于初学者来说这是一个很好的练习先用最小状态表达需求再根据实际交互判断是否需要扩展而不是一开始就为所有可能的未来功能预留大量状态。视觉反馈应该服务于状态而不是独立存在。选中背景、详细文案、收起文字和底部摘要共同表达了“当前已查看某个模块”。如果只改变其中一项用户仍可能理解不完整。把多个位置绑定到同一个状态是提高反馈一致性的有效方式。固定数据也可以有工程价值。它能够让开发者先验证布局和交互再决定接入真实数据的方式。只要明确固定数据的边界就不会把原型误认为最终业务也可以在后续迭代中逐步替换数据源。页面先把“展示什么、如何操作、怎样反馈”确定下来再接入真实检查结果是比较稳妥的开发顺序。十九、总结这个综合实践页面用四张验收卡组织了启动性能、渲染质量、工程规范和发布版本四类信息。初始状态下卡片全部收起辅助文案统一提示用户点击查看点击某张卡片后页面通过浅蓝背景、详细结果、“收起”文字和底部摘要共同反馈当前状态再次点击可以关闭详情点击另一张则直接切换到新的模块。页面的技术重点可以归纳为四点。第一使用单一选中状态表达互斥的展开关系避免多个布尔值带来的状态冲突。第二使用统一结构展示四项固定数据让卡片在布局、间距和操作位置上保持一致。第三使用颜色和符号进行分类让用户在阅读文字之前就能获得视觉线索。第四使用靠近操作位置的卡片反馈和固定位置的底部摘要形成完整的交互闭环。同时必须明确页面中的耗时、掉帧率、规范结果和版本状态都是用于展示的固定信息。页面没有执行真实性能测试、静态检查、签名和发布也没有连接外部设备或后台服务。把这些能力边界写清楚才能准确评价这个页面它是一套围绕综合交付看板的 ArkUI 交互示例重点在于页面结构、状态变化和反馈设计。如果你正在学习 ArkUI可以先从观察四张卡片开始再依次点击、切换和收起记录每个视觉变化。理解这些变化由同一个选择事实驱动之后再尝试思考如何增加真实数据、失败状态或历史记录。先把当前页面的真实行为看懂再讨论扩展是读懂综合实践页面最可靠的方式。