鸿蒙应用开发之家庭应急物资首页深度实践环形进度准备度卡与充足偏少双态列表布局文章目录鸿蒙应用开发之家庭应急物资首页深度实践环形进度准备度卡与充足偏少双态列表布局1、引言2、效果展示与页面结构3、Header单行品牌头的标准范式4、ReadyCard橙棕渐变准备度卡与环形进度5、SupplyList充足/偏少双态物资列表6、跨页数据自洽应急物资的全局闭环7、多维度方案选型对比环形进度首页的系列差异8、避坑指南应急首页的四个防翻车细节9、常见问题 FAQ10、总结1、引言打开任何一款应用第一屏决定了用户的第一印象。我们的家庭应急物资管理应用也不例外——用户点开图标最想看到的不是菜单、不是设置而是一个直击灵魂的问题我家应急准备得怎么样这个问题的答案需要两个层次的信息来回答第一层是一个数字——准备度百分比用环形进度直观呈现还差多少第二层是一张清单——哪些物资充足、哪些偏少逐条列出来让用户心里有数。一层宏观指标一层微观明细缺一不可。在传统的移动端开发中这种指标卡 状态列表的组合布局往往需要用 CardView 嵌套 RecyclerView环形进度要自定义 View 手绘 Canvas状态胶囊的颜色逻辑散落在 Adapter 里改一个状态色要翻三个文件。幸运的是在 HarmonyOS 的 ArkUI 声明式开发范式中Builder装饰器给了我们一种极其优雅的方案将首页拆分为三个独立的构建块Header、ReadyCard、SupplyList环形进度用原生Progress组件一行搞定物资状态通过数据模型的statusColor字段动态注入整页代码不到 100 行。这篇实战手记我们将从60-emergency-kit/entry/src/main/ets/pages/HomeTab.ets共 95 行切入不仅教你如何用Builder拆解首页的三区结构更重要的是借此机会彻底拆解橙棕渐变准备度卡的环形进度呈现机制以及充足/偏少双态胶囊在物资列表中的颜色编码设计。我们不背文档不讲空话直接看真实场景下的解法。2、效果展示与页面结构在正式深入代码之前我们先看看最终的页面表现和工程底座。直观的视觉冲击能让你瞬间明白我们在解决什么问题。首页是品牌头部 应急准备度 物资库存的三区布局整体由 3 个Builder块构成build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ReadyCard() this.SectionTitle(物资库存) this.SupplyList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }这个结构的设计初衷是明确划分总览和明细的职责边界Header— 单行品牌头“应急物资”白底固定22 号加粗点明应用主题ReadyCard— 橙棕渐变准备度卡环形进度 75% “2 项物资需要补充”SupplyList— 物资库存标题 4 条物资卡片列表充足绿/偏少橙双态胶囊首页回答的核心问题是家庭应急准备得怎么样、还缺什么——准备度卡给结论75% 环形进度 2 项需补充列表给明细4 种关键物资的库存与状态一屏完成水平评估 → 缺口定位的认知闭环。3、Header单行品牌头的标准范式Header() { Column() { Text(应急物资).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }首页 Header 的标准范式22 号加粗大字、safeTop 10避让状态栏、底部 12 内边距、白底全宽。应急物资直白点题——管理家庭应急物资的工具与系列工具型首页App 45 签到墙 / App 59 用药提醒同款单行标题范式。这里有一个极其关键的细节padding({ top: this.safeTop 10 })将状态栏安全区纳入 Header 内边距。如果不做这层处理在刘海屏设备上应急物资四个字会被状态栏遮挡——这是鸿蒙开发中最容易忽略的适配坑之一。4、ReadyCard橙棕渐变准备度卡与环形进度ReadyCard() { Row({ space: 16 }) { Stack({ alignContent: Alignment.Center }) { Progress({ value: 75, total: 100, type: ProgressType.Ring }) .width(66).height(66).color(#FFFFFF).style({ strokeWidth: 6 }).backgroundColor(#44FFFFFF) Text(75%).fontSize(15).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) } Column({ space: 4 }) { Text(应急准备度).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(2 项物资需要补充).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }这段代码中有几处极其精妙的设计是我们在多次迭代后沉淀出来的第一橙棕渐变的品牌语义。linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——从#D35400橙棕渐变到#E88050浅橙135 度对角线方向。橙色 应急/安全警示的语义色救生、警惕的联想与 App 57 加油的活力橙不同本页橙棕更沉稳应急场景用橙色传达关注准备。这张卡不是独立组件而是品牌视觉体系的一环——用户看到橙棕渐变就联想到应急物资。第二环形进度的白色呈现策略。Progress({ value: 75, total: 100, type: ProgressType.Ring })——66×66 白色圆环color(#FFFFFF)白环 strokeWidth(6)粗环 backgroundColor(#44FFFFFF)白色 27% 透明底环。ArkUI 原生 Ring 进度组件白色圆环在橙棕渐变上高对比深底白环最清晰底环用 27% 透明白形成已填/未填的环段对比。若用主题色环橙在橙底上会糊成一片白环是深底进度的标准配色。第三环内百分比文字的叠放。Stack({ alignContent: Alignment.Center })叠放环 “75%” 15 号 Bold 白字——进度数字居中在环内标准环形进度形态白字与白环呼应用户扫一眼就抓到核心数字。第四主副文案的信息层次。16 号 Bold应急准备度是首页第一信息家庭应急准备的水平指标12 号 90% 透明2 项物资需要补充是待办量还有 2 种物资不足与列表偏少状态对应。主文案给水平、副文案给缺口两级信息完成水平到缺口的引导。第五数据自洽的加权逻辑。75% 准备度 ↔ 4 种物资中 2 种充足饮用水/手电筒、2 种偏少罐头/急救包——充足率 50% 但按物资重要性加权为 75%饮用水/急救包等关键物资权重高。准备度不是简单的充足占比而是关键物资权重的综合指标。5、SupplyList充足/偏少双态物资列表SupplyList() { Column({ space: 10 }) { ForEach(this.supplies, (s: Supply) { Row({ space: 12 }) { Row() { Text(s.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Text(s.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(库存 s.count 件).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(s.status).fontSize(11).fontColor(s.statusColor) .padding({ left: 8, right: 8, top: 3, bottom: 3 }).backgroundColor(s.statusColor 22).borderRadius(6) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: s.name }); }) }, (s: Supply) s.id.toString()) }.width(100%) }4 条物资数据21-26 行物资库存状态颜色 瓶装饮用水24 件充足绿 罐头食品6 件偏少橙 手电筒2 件充足绿 医药急救包1 件偏少橙这段代码中有几处极其精妙的设计第一主色软底图标的品牌统一。backgroundColor(C.primarySoft)#FDE8DC浅橙棕 24 号 emoji——浅橙圆角底每物专属 emoji应急物资类型一眼可辨。首页的图标底用主题色软底品牌统一与检查页的问题色透明底形成区分——首页是库存总览用品牌色、检查页是问题导向用问题色。第二物资名与库存件数的信息组合。14 号 Medium 物资名 12 号淡灰库存 24 件——名称 数量layoutWeight(1)撑开用户一眼看到什么物资、有多少。第三双态状态胶囊的颜色编码。右侧s.status充足/偏少——字色 透明底色胶囊statusColor 22≈ 13% 透明底充足绿#2BB673、偏少橙#FF9F1C。两态红绿灯式状态充足绿/偏少橙无红色最紧急因为首页是库存总览、紧急项在检查页。用户扫列表时橙色偏少标最先被注意定位缺口。第四库存量的梯度设计。24/6/2/1 件——覆盖充足到偏少的梯度饮用水 24 最充足、急救包 1 最偏少偏少项罐头 6、急救包 1对应准备度卡2 项需补充。第五整卡点击的交互预留。点击 Toast 物资名“瓶装饮用水”——产品化后跳物资详情/编辑页整卡可点击扩大热区。6、跨页数据自洽应急物资的全局闭环首页不是孤岛——它与物资页、检查页、我的页形成四页数据闭环首页4 种物资↔ 物资页3 分类 8 种物品——首页展示 4 种关键应急物资饮用水/罐头/手电筒/急救包物资页按 3 分类展示 8 种全部物品首页是关键项、物资页是全集。首页罐头食品 偏少 6 件↔ 物资页罐头 6、检查页罐头食品 库存仅剩 6 件——数量完全一致6 件首页标偏少、物资页显示数量、检查页标库存不足建议去补充三页同源。首页医药急救包 偏少 1 件↔ 检查页医药急救包 库存仅剩 1 个 库存不足——数量一致1 件首页偏少 → 检查页库存不足更紧急检查页是首页偏少项的处理页。首页2 项物资需要补充↔ 检查页2 库存不足——数量一致2 项罐头 急救包准备度卡的待办量 检查页的库存不足数。首页75% 准备度↔ 我的页75% 准备度——数值完全一致首页环形进度 我的页统计准备度 75%。这套闭环的核心是统一数据源——四页共享同一份物资数据模型首页做准备度总览、物资页做库存管理、检查页做问题处理、我的页做提醒配置各司其职但数据同源。改一处库存四页同步刷新。7、多维度方案选型对比环形进度首页的系列差异在实际的架构研讨中有同学曾经发出过极其尖锐的质疑“首页为什么要用环形进度用数字不就行了”为了彻底解答这个选型问题我们将系列中指标卡型首页对比维度App 60 应急物资App 39 兴趣匹配App 57 加油记录App 55 续费提醒核心指标准备度 75%匹配度 95%油耗支出预警指标呈现环形进度环形进度油耗卡预警卡列表内容4 条物资充足/偏少标签快查统计临期列表主题色橙棕#D35400粉#FF6B9D橙#FF6B35红#FF6B6B60 与 39 都用环形进度39 的 95% 匹配度、60 的 75% 准备度但场景不同39 是兴趣匹配软性社交、60 是应急准备刚性安全。60 的差异化在于**“环形进度 双态物资”**白色环形进度在橙棕渐变卡上醒目应急准备度的核心指标物资列表的充足/偏少双态胶囊绿/橙让还缺什么一目了然且2 项需补充直接对接检查页的处理列表——准备度 → 缺口 → 去补充的完整引导链路是应急场景独有的。8、避坑指南应急首页的四个防翻车细节在将这套看起来优雅的首页设计推向真实生产环境时我们踩过了几个深浅不一的暗坑。以下是内部复盘后沉淀的防翻车铁律第一准备度计算必须动态化。75% 是写死的——产品化应由物资状态动态计算充足物资占比加权关键物资权重更高饮用水/急救包权重 电池物资补足后准备度自动上升首页环形进度与我的页统计联动同一计算函数。如果写死物资补足了但准备度不变用户会完全失去信任。第二状态判定阈值必须统一。充足/偏少写死——产品化按库存 vs 建议量判定饮用水建议 24 件充足、罐头建议 12 件则 6 件偏少每种物资有自己的建议库存低于建议量 50% 标偏少、接近 0 标不足阈值由物资建议量驱动。首页与检查页必须用同一状态机避免首页偏少但检查页没列的不一致。第三环形进度的可访问性。环形进度75%只有数字 75% 在环内——读屏用户无法感知进度产品化应给环形进度加无障碍描述“应急准备度百分之七十五”且环的颜色对比白环橙底在强光下需保持清晰。第四物资与检查页的联动。首页偏少罐头/急救包与检查页库存不足是两处数据——产品化统一状态判定同一库存值在首页标偏少、在检查页标不足由同一状态机驱动避免首页偏少但检查页没列或反之的不一致。9、常见问题 FAQ问75% 的应急准备度是怎么算出来的答演示数据设定家庭应急准备度为 75%写死产品化后由物资充足情况综合计算——4 种关键物资中 2 种充足饮用水/手电筒、2 种偏少罐头/急救包若按充足率是 50%但关键物资饮用水、急救包权重高、且偏少不是没有罐头 6 件、急救包 1 件仍可用综合加权为 75%。准备度是家庭应急物资完整度的综合指标。问为什么首页没有已过期这种红色状态答因为首页是库存总览看物资够不够——充足绿/偏少橙两态已覆盖够不够的问题“已过期/即将过期是还能不能用的问题属于检查页的职责检查页有已过期红、即将过期橙、库存不足橙三态。首页管量”、检查页管质效期 量的分工避免首页信息过载。问准备度卡2 项物资需要补充和列表的偏少是什么关系答完全对应——列表中 2 项偏少罐头食品 6 件、医药急救包 1 件就是准备度卡说的2 项物资需要补充准备度卡给有几项要补、列表给哪几项、缺多少检查页进一步给去补充的入口——首页 → 检查页的缺口引导链路贯穿三处。问应急准备度 75% 算高还是低答75% 属于良的区间60-80%——主要物资饮用水、手电筒充足、次要物资罐头、急救包偏少整体准备尚可但2 项需补充提醒还有改进空间。应急准备的目标是 80% 以上关键物资全部充足75% 提示用户该补罐头和急救包了是够用但不够完美的中等偏上水平。10、总结纵观本篇对 60-emergency-kit 首页HomeTab95 行的逐块拆解Builder三区拆解范式绝对不是大家在走马观花浏览 ArkUI 文档时所以为的仅仅只是把代码拆成几个函数那么简单。首页用三个Builder块完成了准备度总览 物资明细的组合布局Header 点明主题、ReadyCard 给出准备度指标75% 环形进度 2 项需补充、SupplyList 给出库存明细4 种物资充足/偏少双态。整页的视觉语言围绕准备展开——环形进度 75% 是核心指标、偏少橙标是缺口提示、物资卡片是库存明细三层表达让用户既看到准备得怎么样也看到还缺什么。从演示到产品首页的进化方向清晰准备度动态计算、状态按建议量判定、物资按场景分组、临期主动预警。环形进度与双态胶囊是本页的核心让家庭应急物资的准备水平可见、缺口可定位。