鸿蒙应用开发之家庭应急物资个人中心深度实践渐变用户卡与过期提醒开关组合机制文章目录鸿蒙应用开发之家庭应急物资个人中心深度实践渐变用户卡与过期提醒开关组合机制1、引言2、效果展示与页面结构3、UserCard橙棕渐变应急管家卡4、StatRow负边距三列统计行5、RemindCard过期提醒开关卡6、MenuList四工具菜单列表7、About底部版本信息8、跨页数据自洽个人中心的全局闭环9、多维度方案选型对比个人中心的五种风格10、避坑指南个人中心的四个防翻车细节11、常见问题 FAQ12、总结1、引言场景是这样的我们团队最近在开发一款面向家庭用户的应急物资管理应用。产品经理提出了一个极其明确的诉求——我的页面不仅要展示用户身份和统计数据还必须把过期提醒开关放在最显眼的位置因为应急物资的过期管理是整个应用的核心安全功能过期的药品不能吃、过期的罐头不能吃用户必须能在第一时间开启提醒。在传统的移动端开发中这种身份卡 统计 开关 菜单的多区布局往往需要用 ScrollView 嵌套多个自定义 View开关状态与推送调度的联动逻辑散落在 Activity 和 Service 之间统计数据的实时聚合要手写 ObservablePattern维护成本极高。幸运的是在 HarmonyOS 的 ArkUI 声明式开发范式中Builder装饰器给了我们一种极其优雅的方案将我的页拆分为五个独立的构建块UserCard、StatRow、RemindCard、MenuList、About开关用原生Toggle组件一行搞定统计行用负边距悬浮在渐变卡上整页代码不到 120 行。这篇实战手记我们将从60-emergency-kit/entry/src/main/ets/pages/ProfileTab.ets共 115 行切入不仅教你如何用Builder拆解个人中心的五区结构更重要的是借此机会彻底拆解橙棕渐变用户卡与负边距悬浮统计行的层次叠加机制以及过期提醒开关与检查页过期项的推送联动设计。我们不背文档不讲空话直接看真实场景下的解法。2、效果展示与页面结构在正式深入代码之前我们先看看最终的页面表现和工程底座。直观的视觉冲击能让你瞬间明白我们在解决什么问题。我的页是应急身份 统计 提醒开关 工具入口的五区布局整体由 5 个Builder块构成build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.RemindCard() this.MenuList() this.About() } .width(100%) .padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }这个结构的设计初衷是明确划分身份、数据、能力、入口、版权的职责边界UserCard— 橙棕渐变用户卡应急管家身份 “未雨绸缪安心生活”StatRow— 负边距三列统计行32 物资/15 采购/75% 准备度上移 24 悬浮RemindCard— 过期提醒开关卡物资临期时提醒补充默认开启MenuList— 四工具菜单采购记录/库存设置/过期提醒/设置About— 底部版本信息家庭应急物资 Version 1.0.0我的页回答的核心问题是我是谁、家里备了多少、怎么管提醒、去哪配置——用户卡亮身份、统计行给总量、开关卡提供核心能力过期提醒、菜单给工具入口一屏完成身份认知 → 数据总览 → 能力配置 → 工具直达的完整链路。3、UserCard橙棕渐变应急管家卡UserCard() { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text(应急管家).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(未雨绸缪安心生活).fontSize(12).fontColor(#FFFFFF).opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%) .padding({ top: this.safeTop 30, left: D.pad, right: D.pad, bottom: 44 }) .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与首页准备度卡、检查页告警卡同款渐变。用户卡不是独立组件而是品牌视觉体系的一环——用户看到橙棕渐变就联想到应急物资这是色彩品牌化的设计目标。第二半透明圆头像的层次处理。backgroundColor(#33FFFFFF)——白色 20% 透明圆角 32 头像底 32 号居中。“”背包即产品符号与 Tab 图标一致应急背包的意象。半透明白底在橙棕渐变上形成同色系弱对比头像区与卡背景融为一体又不失辨识。第三身份与情感副文案的组合。18 号 Bold 白字应急管家角色名 12 号 85% 白字未雨绸缪安心生活——价值主张式副文案非数据背书。未雨绸缪是应急管理的核心理念灾前准备 灾后应对“安心生活是准备带来的结果八个字概括产品的预防哲学”。第四底部大留白的悬浮预留。bottom: 44safeTop 30——顶部避让状态栏、底部大留白 44 给负边距统计行让位这是系列个人中心卡叠卡层次感的标准手法。4、StatRow负边距三列统计行StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: StatItem) s.label) } .width(92%).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 }) }这段代码中有几处极其精妙的设计第一负边距悬浮的层次叠加。.margin({ top: -24 })——统计行上移 24 覆盖在渐变卡留白区卡片叠卡层次感。白底统计卡悬浮在橙棕渐变卡底部视觉上形成渐变卡 → 白卡的层次过渡是系列个人中心的经典手法。第二三列均分的维度设计。layoutWeight(1)三列——32物资总数/ 15采购记录/ 75%准备度“存量 行动 水平三个维度家里有多少物资、采购过几次、准备水平如何比纯存量统计立体用户从三列就能回答物资够不够、维护得勤不勤、整体水平如何”。第三数据一致性的双展示。75% 首页环形进度准备度——首页环形呈现、我的页统计列出两个页面同一指标双展示。32 物资页全部物品的库存总和、15 采购次数累计统计与物资页/检查页同源。5、RemindCard过期提醒开关卡RemindCard() { Row() { Column({ space: 2 }) { Text(过期提醒).fontSize(14).fontColor(C.text) Text(物资临期时提醒补充).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.expiryRemind }) .selectedColor(C.primary) .onChange((v: boolean) { this.expiryRemind v; }) } .width(92%).padding(16).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }这段代码中有几处极其精妙的设计第一过期提醒开关的核心定位。左侧过期提醒14 号 物资临期时提醒补充11 号淡灰副文案右侧Toggle({ type: ToggleType.Switch, isOn: this.expiryRemind })——开关卡是物资效期提醒的总闸。这是我的页的核心功能不是装饰性开关。第二选中色主橙棕的品牌统一。.selectedColor(C.primary)——开关开启时轨道变#D35400橙棕与渐变卡、分类选中态同色系品牌视觉贯穿到开关组件。第三默认开启的安全优先逻辑。expiryRemind true——物资过期是应急准备的大忌过期的饮用水/药品在紧急时不能用默认开启过期提醒符合应急安全默认优先的逻辑。与 App 53/55/59 的提醒开关默认开启一致——安全类应用的提醒默认开。第四副文案的动作导向。“物资临期时提醒补充”——提醒的动作是补充临期提醒 → 去补新与检查页去补充按钮呼应。开关开启后检查页的过期/临期项触发推送提醒检查页发现 开关决定推送的配合让物资效期管理既被动可查又主动可推。6、MenuList四工具菜单列表MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text().fontSize(14).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.title }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.title) } .width(92%).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }4 个菜单项22-27 行 采购记录 — 查看物资采购历史 库存设置 — 管理物资建议库存与分类⏰ 过期提醒 — 管理过期提醒规则⚙️ 设置 — 应用偏好配置这段代码中有几处极其精妙的设计第一菜单顺序的递进逻辑。采购记录动作历史→ 库存设置配置→ 过期提醒提醒→ 设置偏好——从记录到配置的递进先看买过什么、再设建议量、再管提醒、最后偏好符合先了解后配置的使用逻辑。其中库存设置与过期提醒是应急场景的核心配置放在中间突出。第二0.5 细 Divider 的条件渲染。idx length - 1判断后插入——最后一项不画线整宽细线分隔。strokeWidth(0.5)极细线保证视觉轻量不抢内容焦点。第三菜单与统计的对应关系。采购记录统计 15 采购记录、库存设置物资页分类/建议量、⏰过期提醒RemindCard 的进阶——菜单是统计与开关的进阶管理入口点击后跳对应功能页。7、About底部版本信息About() { Column({ space: 4 }) { Text(家庭应急物资).fontSize(12).fontColor(C.textDim) Text(Version 1.0.0).fontSize(11).fontColor(C.textDim).opacity(0.7) }.width(100%).margin({ top: 24 }) }12 号淡灰家庭应急物资 11 号 70% 透明Version 1.0.0——应用名 版本号与 AppScope/app.json5 的 versionName “1.0.0” 一致个人中心标准收尾。这里用应用全名家庭应急物资首页标题用简写应急物资正式信息用全名是命名的一致性与完整性平衡。8、跨页数据自洽个人中心的全局闭环我的页不是孤岛——它与首页、物资页、检查页形成四页数据闭环我的页32 物资总数↔ 物资页8 种物品库存——32 是全部物资的库存总和物资明细 → 总量统计产品化后动态求和。我的页75% 准备度↔ 首页环形进度 75%——数值完全一致首页环形呈现、我的页统计列出同一指标双展示。我的页过期提醒开关↔ 检查页感冒药已过期/午餐肉临期——开关开启后检查页的过期/临期项触发推送提醒开关是过期检查的推送闸门。我的页15 采购记录↔ 检查页去补充按钮——每次点去补充完成采购后记入采购记录去补充动作 → 采购流水。菜单库存设置↔ 物资页分类/数量——库存设置菜单配置建议库存量物资页按建议量判定充足/偏少建议量配置 → 状态判定。这套闭环的核心是统一数据源——四页共享同一份物资数据模型我的页是提醒配置与统计总览的中枢。9、多维度方案选型对比个人中心的五种风格在实际的架构研讨中有同学曾经发出过极其尖锐的质疑“我的页为什么要放开关开关不是应该放在设置页吗”为了彻底解答这个选型问题我们将系列中个人中心页对比维度App 60 应急管家App 59 健康管家App 58 保养管家App 55 续费管家核心开关过期提醒保险提醒保险提醒推送提醒统计维度物资/采购/准备度药品/成员/健康度里程/保养/保险续费/支出/节省特色菜单采购记录/库存设置家庭成员呼叫救援续费日历主题色橙棕#D35400红#E74C3C青#008080红#FF6B6B60 与 55/59 的结构高度一致卡/统计/开关/菜单/版本差异化在**“过期提醒 采购的场景**——开关管物资临期提醒”应急物资不能过期、菜单含采购记录/库存设置物资的采购与配置闭环统计的75% 准备度是应急场景独有的指标其他应用无准备度概念。情感副文案未雨绸缪安心生活传达应急场景的预防意识是系列中安全预防主题的个人中心。10、避坑指南个人中心的四个防翻车细节在将这套看起来优雅的个人中心设计推向真实生产环境时我们踩过了几个深浅不一的暗坑。以下是内部复盘后沉淀的防翻车铁律第一统计值必须动态化。32/15/75% 都是写死的——产品化由数据源实时聚合物资总数 全部库存求和items.reduce((sum, it) sum it.count, 0)、采购记录 采购流水条数、准备度 状态计算函数物资页加减库存后统计自动更新。如果写死物资页改了数量但我的页统计不变用户会以为应用坏了。第二过期提醒与推送必须联动。expiryRemind只改内存态——产品化需联动通知权限与推送调度开启后注册效期扫描每日检查物资有效期临期/过期项推送XX 将于 N 天后过期开关状态 推送能力两层同步。关闭则停止扫描推送但仍可在检查页被动查看。第三准备度计算函数必须复用。75% 在首页环形进度与我的页统计两处——产品化应抽象计算准备度函数按物资充足度与关键性加权首页与我的页调用同一函数保证两页数值一致。当前写死两处若手动改一处另一处不同步用户会看到首页 75%、我的页 80%的矛盾。第四采购记录的数据结构必须设计。菜单采购记录是占位——产品化记录每次采购时间/物资/数量/金额与检查页去补充联动点去补充 → 生成采购记录 → 库存更新采购记录是库存增减的审计。11、常见问题 FAQ问统计行的32 物资总数是怎么算的答演示数据设定全部物资库存合计 32 件产品化后由物资页所有物品的库存数量动态求和——“物资总数是家庭应急物资的总量指标让用户知道家里备了多少件应急物资”与检查页的库存不足对照总量 vs 缺口。问75% 准备度和首页的环形进度是什么关系答完全同一个指标——首页用环形进度可视化呈现白环 75%我的页用统计数字列出75% 准备度两处数据相同、呈现不同环 vs 数字。产品化后由同一准备度计算函数生成物资补足后两处同步上升。问过期提醒开关和检查页的已过期/即将过期是什么关系答检查页的过期/临期项是数据哪些物资快过期过期提醒开关是推送要不要提醒——开关开启后检查页的过期/临期项会触发推送提醒“感冒药已过期请补充”开关关闭则只在检查页被动查看不主动推送。检查页发现 开关决定推送的配合让物资效期管理既被动可查又主动可推。问为什么用户卡叫应急管家答延续角色化命名传统——“应急管家是管理家庭应急事务的角色”比用户/我的更有服务感副文案未雨绸缪安心生活是角色的价值主张提前准备 安心角色名 价值主张的组合是个人中心页的身份范式。12、总结纵观本篇对 60-emergency-kit 我的页ProfileTab115 行的逐块拆解Builder五区拆解范式绝对不是大家在走马观花浏览 ArkUI 文档时所以为的仅仅只是把代码拆成几个函数那么简单。我的页用五个Builder块完成了身份 数据 能力 入口 版权的完整呈现UserCard 亮出身份应急管家 未雨绸缪、StatRow 展示数据32 物资/15 采购/75% 准备度、RemindCard 提供核心能力过期提醒开关、MenuList 给出工具入口四菜单、About 收尾版本号。整页的视觉语言围绕应急管家展开——橙棕渐变是品牌签名、负边距悬浮是层次手法、过期开关是核心能力、四菜单是工具直达。从演示到产品我的页的进化方向清晰统计动态聚合、推送联动调度、准备度函数复用、采购记录审计。过期提醒开关是本页的核心让应急物资的效期管理被动可查、主动可推。 
长河君 · 2026/8/30 9:04:18 · 阅读 1.2k 鸿蒙应用开发之家庭应急物资个人中心深度实践：渐变用户卡与过期提醒开关组合机制
鸿蒙应用开发之家庭应急物资个人中心深度实践渐变用户卡与过期提醒开关组合机制文章目录鸿蒙应用开发之家庭应急物资个人中心深度实践渐变用户卡与过期提醒开关组合机制1、引言2、效果展示与页面结构3、UserCard橙棕渐变应急管家卡4、StatRow负边距三列统计行5、RemindCard过期提醒开关卡6、MenuList四工具菜单列表7、About底部版本信息8、跨页数据自洽个人中心的全局闭环9、多维度方案选型对比个人中心的五种风格10、避坑指南个人中心的四个防翻车细节11、常见问题 FAQ12、总结1、引言场景是这样的我们团队最近在开发一款面向家庭用户的应急物资管理应用。产品经理提出了一个极其明确的诉求——我的页面不仅要展示用户身份和统计数据还必须把过期提醒开关放在最显眼的位置因为应急物资的过期管理是整个应用的核心安全功能过期的药品不能吃、过期的罐头不能吃用户必须能在第一时间开启提醒。在传统的移动端开发中这种身份卡 统计 开关 菜单的多区布局往往需要用 ScrollView 嵌套多个自定义 View开关状态与推送调度的联动逻辑散落在 Activity 和 Service 之间统计数据的实时聚合要手写 ObservablePattern维护成本极高。幸运的是在 HarmonyOS 的 ArkUI 声明式开发范式中Builder装饰器给了我们一种极其优雅的方案将我的页拆分为五个独立的构建块UserCard、StatRow、RemindCard、MenuList、About开关用原生Toggle组件一行搞定统计行用负边距悬浮在渐变卡上整页代码不到 120 行。这篇实战手记我们将从60-emergency-kit/entry/src/main/ets/pages/ProfileTab.ets共 115 行切入不仅教你如何用Builder拆解个人中心的五区结构更重要的是借此机会彻底拆解橙棕渐变用户卡与负边距悬浮统计行的层次叠加机制以及过期提醒开关与检查页过期项的推送联动设计。我们不背文档不讲空话直接看真实场景下的解法。2、效果展示与页面结构在正式深入代码之前我们先看看最终的页面表现和工程底座。直观的视觉冲击能让你瞬间明白我们在解决什么问题。我的页是应急身份 统计 提醒开关 工具入口的五区布局整体由 5 个Builder块构成build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.RemindCard() this.MenuList() this.About() } .width(100%) .padding({ bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }这个结构的设计初衷是明确划分身份、数据、能力、入口、版权的职责边界UserCard— 橙棕渐变用户卡应急管家身份 “未雨绸缪安心生活”StatRow— 负边距三列统计行32 物资/15 采购/75% 准备度上移 24 悬浮RemindCard— 过期提醒开关卡物资临期时提醒补充默认开启MenuList— 四工具菜单采购记录/库存设置/过期提醒/设置About— 底部版本信息家庭应急物资 Version 1.0.0我的页回答的核心问题是我是谁、家里备了多少、怎么管提醒、去哪配置——用户卡亮身份、统计行给总量、开关卡提供核心能力过期提醒、菜单给工具入口一屏完成身份认知 → 数据总览 → 能力配置 → 工具直达的完整链路。3、UserCard橙棕渐变应急管家卡UserCard() { Row({ space: 14 }) { Row() { Text().fontSize(32) } .width(64).height(64).backgroundColor(#33FFFFFF).borderRadius(32).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Text(应急管家).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(未雨绸缪安心生活).fontSize(12).fontColor(#FFFFFF).opacity(0.85) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%) .padding({ top: this.safeTop 30, left: D.pad, right: D.pad, bottom: 44 }) .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与首页准备度卡、检查页告警卡同款渐变。用户卡不是独立组件而是品牌视觉体系的一环——用户看到橙棕渐变就联想到应急物资这是色彩品牌化的设计目标。第二半透明圆头像的层次处理。backgroundColor(#33FFFFFF)——白色 20% 透明圆角 32 头像底 32 号居中。“”背包即产品符号与 Tab 图标一致应急背包的意象。半透明白底在橙棕渐变上形成同色系弱对比头像区与卡背景融为一体又不失辨识。第三身份与情感副文案的组合。18 号 Bold 白字应急管家角色名 12 号 85% 白字未雨绸缪安心生活——价值主张式副文案非数据背书。未雨绸缪是应急管理的核心理念灾前准备 灾后应对“安心生活是准备带来的结果八个字概括产品的预防哲学”。第四底部大留白的悬浮预留。bottom: 44safeTop 30——顶部避让状态栏、底部大留白 44 给负边距统计行让位这是系列个人中心卡叠卡层次感的标准手法。4、StatRow负边距三列统计行StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: StatItem) s.label) } .width(92%).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 }) }这段代码中有几处极其精妙的设计第一负边距悬浮的层次叠加。.margin({ top: -24 })——统计行上移 24 覆盖在渐变卡留白区卡片叠卡层次感。白底统计卡悬浮在橙棕渐变卡底部视觉上形成渐变卡 → 白卡的层次过渡是系列个人中心的经典手法。第二三列均分的维度设计。layoutWeight(1)三列——32物资总数/ 15采购记录/ 75%准备度“存量 行动 水平三个维度家里有多少物资、采购过几次、准备水平如何比纯存量统计立体用户从三列就能回答物资够不够、维护得勤不勤、整体水平如何”。第三数据一致性的双展示。75% 首页环形进度准备度——首页环形呈现、我的页统计列出两个页面同一指标双展示。32 物资页全部物品的库存总和、15 采购次数累计统计与物资页/检查页同源。5、RemindCard过期提醒开关卡RemindCard() { Row() { Column({ space: 2 }) { Text(过期提醒).fontSize(14).fontColor(C.text) Text(物资临期时提醒补充).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.expiryRemind }) .selectedColor(C.primary) .onChange((v: boolean) { this.expiryRemind v; }) } .width(92%).padding(16).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }这段代码中有几处极其精妙的设计第一过期提醒开关的核心定位。左侧过期提醒14 号 物资临期时提醒补充11 号淡灰副文案右侧Toggle({ type: ToggleType.Switch, isOn: this.expiryRemind })——开关卡是物资效期提醒的总闸。这是我的页的核心功能不是装饰性开关。第二选中色主橙棕的品牌统一。.selectedColor(C.primary)——开关开启时轨道变#D35400橙棕与渐变卡、分类选中态同色系品牌视觉贯穿到开关组件。第三默认开启的安全优先逻辑。expiryRemind true——物资过期是应急准备的大忌过期的饮用水/药品在紧急时不能用默认开启过期提醒符合应急安全默认优先的逻辑。与 App 53/55/59 的提醒开关默认开启一致——安全类应用的提醒默认开。第四副文案的动作导向。“物资临期时提醒补充”——提醒的动作是补充临期提醒 → 去补新与检查页去补充按钮呼应。开关开启后检查页的过期/临期项触发推送提醒检查页发现 开关决定推送的配合让物资效期管理既被动可查又主动可推。6、MenuList四工具菜单列表MenuList() { Column() { ForEach(this.menus, (m: MenuItem, idx: number) { Row({ space: 12 }) { Text(m.emoji).fontSize(18) Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1) Text().fontSize(14).fontColor(C.textDim) } .width(100%).padding({ left: 14, right: 14, top: 14, bottom: 14 }) .onClick(() { promptAction.showToast({ message: m.title }); }) if (idx this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (m: MenuItem) m.title) } .width(92%).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }4 个菜单项22-27 行 采购记录 — 查看物资采购历史 库存设置 — 管理物资建议库存与分类⏰ 过期提醒 — 管理过期提醒规则⚙️ 设置 — 应用偏好配置这段代码中有几处极其精妙的设计第一菜单顺序的递进逻辑。采购记录动作历史→ 库存设置配置→ 过期提醒提醒→ 设置偏好——从记录到配置的递进先看买过什么、再设建议量、再管提醒、最后偏好符合先了解后配置的使用逻辑。其中库存设置与过期提醒是应急场景的核心配置放在中间突出。第二0.5 细 Divider 的条件渲染。idx length - 1判断后插入——最后一项不画线整宽细线分隔。strokeWidth(0.5)极细线保证视觉轻量不抢内容焦点。第三菜单与统计的对应关系。采购记录统计 15 采购记录、库存设置物资页分类/建议量、⏰过期提醒RemindCard 的进阶——菜单是统计与开关的进阶管理入口点击后跳对应功能页。7、About底部版本信息About() { Column({ space: 4 }) { Text(家庭应急物资).fontSize(12).fontColor(C.textDim) Text(Version 1.0.0).fontSize(11).fontColor(C.textDim).opacity(0.7) }.width(100%).margin({ top: 24 }) }12 号淡灰家庭应急物资 11 号 70% 透明Version 1.0.0——应用名 版本号与 AppScope/app.json5 的 versionName “1.0.0” 一致个人中心标准收尾。这里用应用全名家庭应急物资首页标题用简写应急物资正式信息用全名是命名的一致性与完整性平衡。8、跨页数据自洽个人中心的全局闭环我的页不是孤岛——它与首页、物资页、检查页形成四页数据闭环我的页32 物资总数↔ 物资页8 种物品库存——32 是全部物资的库存总和物资明细 → 总量统计产品化后动态求和。我的页75% 准备度↔ 首页环形进度 75%——数值完全一致首页环形呈现、我的页统计列出同一指标双展示。我的页过期提醒开关↔ 检查页感冒药已过期/午餐肉临期——开关开启后检查页的过期/临期项触发推送提醒开关是过期检查的推送闸门。我的页15 采购记录↔ 检查页去补充按钮——每次点去补充完成采购后记入采购记录去补充动作 → 采购流水。菜单库存设置↔ 物资页分类/数量——库存设置菜单配置建议库存量物资页按建议量判定充足/偏少建议量配置 → 状态判定。这套闭环的核心是统一数据源——四页共享同一份物资数据模型我的页是提醒配置与统计总览的中枢。9、多维度方案选型对比个人中心的五种风格在实际的架构研讨中有同学曾经发出过极其尖锐的质疑“我的页为什么要放开关开关不是应该放在设置页吗”为了彻底解答这个选型问题我们将系列中个人中心页对比维度App 60 应急管家App 59 健康管家App 58 保养管家App 55 续费管家核心开关过期提醒保险提醒保险提醒推送提醒统计维度物资/采购/准备度药品/成员/健康度里程/保养/保险续费/支出/节省特色菜单采购记录/库存设置家庭成员呼叫救援续费日历主题色橙棕#D35400红#E74C3C青#008080红#FF6B6B60 与 55/59 的结构高度一致卡/统计/开关/菜单/版本差异化在**“过期提醒 采购的场景**——开关管物资临期提醒”应急物资不能过期、菜单含采购记录/库存设置物资的采购与配置闭环统计的75% 准备度是应急场景独有的指标其他应用无准备度概念。情感副文案未雨绸缪安心生活传达应急场景的预防意识是系列中安全预防主题的个人中心。10、避坑指南个人中心的四个防翻车细节在将这套看起来优雅的个人中心设计推向真实生产环境时我们踩过了几个深浅不一的暗坑。以下是内部复盘后沉淀的防翻车铁律第一统计值必须动态化。32/15/75% 都是写死的——产品化由数据源实时聚合物资总数 全部库存求和items.reduce((sum, it) sum it.count, 0)、采购记录 采购流水条数、准备度 状态计算函数物资页加减库存后统计自动更新。如果写死物资页改了数量但我的页统计不变用户会以为应用坏了。第二过期提醒与推送必须联动。expiryRemind只改内存态——产品化需联动通知权限与推送调度开启后注册效期扫描每日检查物资有效期临期/过期项推送XX 将于 N 天后过期开关状态 推送能力两层同步。关闭则停止扫描推送但仍可在检查页被动查看。第三准备度计算函数必须复用。75% 在首页环形进度与我的页统计两处——产品化应抽象计算准备度函数按物资充足度与关键性加权首页与我的页调用同一函数保证两页数值一致。当前写死两处若手动改一处另一处不同步用户会看到首页 75%、我的页 80%的矛盾。第四采购记录的数据结构必须设计。菜单采购记录是占位——产品化记录每次采购时间/物资/数量/金额与检查页去补充联动点去补充 → 生成采购记录 → 库存更新采购记录是库存增减的审计。11、常见问题 FAQ问统计行的32 物资总数是怎么算的答演示数据设定全部物资库存合计 32 件产品化后由物资页所有物品的库存数量动态求和——“物资总数是家庭应急物资的总量指标让用户知道家里备了多少件应急物资”与检查页的库存不足对照总量 vs 缺口。问75% 准备度和首页的环形进度是什么关系答完全同一个指标——首页用环形进度可视化呈现白环 75%我的页用统计数字列出75% 准备度两处数据相同、呈现不同环 vs 数字。产品化后由同一准备度计算函数生成物资补足后两处同步上升。问过期提醒开关和检查页的已过期/即将过期是什么关系答检查页的过期/临期项是数据哪些物资快过期过期提醒开关是推送要不要提醒——开关开启后检查页的过期/临期项会触发推送提醒“感冒药已过期请补充”开关关闭则只在检查页被动查看不主动推送。检查页发现 开关决定推送的配合让物资效期管理既被动可查又主动可推。问为什么用户卡叫应急管家答延续角色化命名传统——“应急管家是管理家庭应急事务的角色”比用户/我的更有服务感副文案未雨绸缪安心生活是角色的价值主张提前准备 安心角色名 价值主张的组合是个人中心页的身份范式。12、总结纵观本篇对 60-emergency-kit 我的页ProfileTab115 行的逐块拆解Builder五区拆解范式绝对不是大家在走马观花浏览 ArkUI 文档时所以为的仅仅只是把代码拆成几个函数那么简单。我的页用五个Builder块完成了身份 数据 能力 入口 版权的完整呈现UserCard 亮出身份应急管家 未雨绸缪、StatRow 展示数据32 物资/15 采购/75% 准备度、RemindCard 提供核心能力过期提醒开关、MenuList 给出工具入口四菜单、About 收尾版本号。整页的视觉语言围绕应急管家展开——橙棕渐变是品牌签名、负边距悬浮是层次手法、过期开关是核心能力、四菜单是工具直达。从演示到产品我的页的进化方向清晰统计动态聚合、推送联动调度、准备度函数复用、采购记录审计。过期提醒开关是本页的核心让应急物资的效期管理被动可查、主动可推。