ArkUI 声明式实战：保养提醒我的页 —— 爱车信息卡与保险到期开关组合技

ArkUI 声明式实战保养提醒我的页 —— 爱车信息卡与保险到期开关组合技App 58「车辆保养提醒」我的页ProfileTab主题色#008080青蓝。本页是我的爱车的个人中心——青蓝渐变用户卡 64×64 半透明圆头像 我的爱车18 号 Bold 本田雅阁 · 12,580 km负边距统计行12 保养次数 / ¥3.8k 累计花费 / 2 待办提醒上移 24 悬浮保险到期提醒开关卡保险到期提醒 提前 30 天提醒续保副文案 青蓝 Switch 开关四菜单列表 车辆信息 / ️ 保险提醒 / 保养周期 / ⚙️ 设置0.5 Divider 分隔底部版本号车辆保养提醒 Version 1.0.0。本篇基于58-car-maintain/entry/src/main/ets/pages/ProfileTab.ets共 114 行逐段拆解附 4 张实机截图。一、整体结构五区用户卡 统计 开关 菜单 版本布局我的页是爱车信息 统计 保险开关 工具入口的五区布局——5 个 Builder 块build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() this.InsureCard() 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) }5 块结构UserCard— 青蓝渐变用户卡爱车身份 车型里程StatRow— 负边距三列统计行次数/花费/待办InsureCard— 保险到期提醒开关卡提前 30 天续保MenuList— 四工具菜单车辆/保险/周期/设置About— 底部版本信息我的页是爱车个人中心 保险中枢——先亮身份我的爱车 本田雅阁·12580km、再看统计12 次/3.8k/2 待办、设置保险到期提醒开关本页独有、最后进工具菜单。与 App 57 加油记录我的页结构一致但开关从无变为保险到期提醒保险是车辆养车成本的大头菜单含保养周期本应用核心功能体现保养 保险的双保管理定位。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、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(本田雅阁 · 12,580 km).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]] })——从#008080渐变到#4DBABA与首页状态卡同款渐变青蓝主题统一。64×64 半透明圆头像backgroundColor(#33FFFFFF)——白色 20% 透明圆角 32 头像底 32 号居中。汽车即产品符号与 Tab 图标、首页状态卡一致。爱车身份 车型里程副文案18 号 Bold 白字我的爱车昵称 12 号 85% 白字本田雅阁 · 12,580 km车型 当前里程——与 App 57 的大众朗逸 · 沪A·88888不同本页副文案是车型 里程保养应用关心里程多于车牌12,580 km 与首页当前里程一致。底部留白 44bottom: 44safeTop 30——顶部避让、底部大留白给负边距统计行让位系列个人中心标准。三、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)三列——12保养次数/ ¥3.8k累计花费/ 2待办提醒每列 18 号 Bold 数值 11 号淡灰标签。数据一致性12 日志页12 保养次数、¥3.8k 日志页¥3860四舍五入、2 待办提醒数量如刹车片超期 保险到期——我的页统计与日志页/首页待办一致。2 待办提醒是动态指标待办 首页已超期项目刹车片 保险到期——待办数与首页告警联动产品化后随超期项目数量变化。四、InsureCard保险到期提醒开关卡InsureCard() { Row() { Column({ space: 2 }) { Text(保险到期提醒).fontSize(14).fontColor(C.text) Text(提前 30 天提醒续保).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.insureRemind }) .selectedColor(C.primary) .onChange((v: boolean) { this.insureRemind v; }) } .width(92%).padding(16).margin({ top: 14 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }技术拆解保险提醒开关卡左侧保险到期提醒14 号 提前 30 天提醒续保11 号淡灰副文案右侧Toggle({ type: ToggleType.Switch, isOn: this.insureRemind })——开关卡是保险续保提醒的总闸。选中色主青.selectedColor(C.primary)——开关开启时轨道变#008080青蓝。默认开启insureRemind true——保险是养车大头一年几千元错过续保可能导致脱保出险不赔默认开启续保提醒符合高价值提醒默认开启的逻辑与 App 53/55 的提醒开关默认开启一致。30 天阈值副文案提前 30 天提醒续保——保险到期前 30 天提醒给足续保决策时间货比三家与首页保养剩余 500km的告警逻辑同属提前量提醒体系。五、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 行 车辆信息 — 管理车辆信息车型、里程、车牌️ 保险提醒 — 管理保险到期提醒险种、到期日 保养周期 — 设置各保养项目的周期机油 5000km 等⚙️ 设置 — 应用偏好配置技术拆解左 emoji 中标题 右箭头18 号 emoji️⚙️ 14 号标题 箭头——标准列表行。0.5 细 Divideridx length - 1判断后插入——最后一项不画线整宽细线分隔。整行点击点击 Toast 菜单名——产品化后跳对应功能页保险提醒 ↔ InsureCard 的进阶设置、保养周期 ↔ 各项目周期配置。保险提醒与保养周期是双保核心️ 保险提醒续保管理 保养周期保养间隔配置——双保保养 保险是本应用的差异化菜单App 57 加油记录只有保养提醒没有保险体现养车成本全管理的方向。六、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 一致个人中心标准收尾。七、跨页数据自洽个人中心的全局闭环我的页与首页、保养、日志三页形成完整闭环我的页12 保养次数 / ¥3.8k↔ 日志页12 保养次数 / ¥3860——数字完全一致12 次、3860 ≈ 3.8k我的页从统计角度、日志页从明细角度展示同一批保养数据。我的页2 待办提醒↔ 首页刹车片已超期——待办 首页超期项目刹车片 保险到期2 件首页告警 → 我的页待办数。我的页保险到期提醒开关↔ 菜单保险提醒——开关是续保提醒的总闸、菜单是保险设置的进阶入口快捷开关 完整设置互补。用户卡12,580 km↔ 首页当前里程 12,580 km——里程一致用户卡标识当前车辆状态、首页按此计算保养剩余。菜单保养周期↔ 首页机油 500km——保养周期菜单配置各项目间隔机油 5000km首页剩余里程 下次保养里程 - 当前里程由周期推算周期配置 → 首页告警。八、系列横向对比车辆类个人中心三种风格系列中车辆/车主型个人中心对比App 58 车辆保养青#008080爱车卡 统计 保险开关 四菜单——双保型保养 保险。App 57 加油记录橙#FF6B35爱车卡 统计 四菜单保养提醒——爱车型加油 保养。App 56 停车记录深灰#2D3436车主卡 统计 四菜单常用地点——车主型停车费用。58 与 57 都用我的爱车身份同款用户卡结构但 58 多了**保险到期提醒开关**57 无保险相关——58 的差异化在双保管理保养 保险是养车的两大定期支出开关卡管保险续保提醒、菜单保养周期管保养间隔统计行2 待办提醒整合保养超期与保险到期整个个人中心围绕双保组织是系列中养车成本管理最完整的个人中心。九、开发者避坑个人中心四个细节从 ProfileTab 的实现提炼四个易踩坑点保险提醒与保单数据联动insureRemind只改开关状态——产品化需联动保单数据保险到期日、险种、保费提醒按到期日 - 30 天触发推送开关状态 保单数据两层同步开关开了但没录保单 → 无法提醒应引导录保单。待办数量的动态计算2 待办提醒写死——产品化由首页超期项目数 保险到期数动态计算刹车片超期 保险 30 天内到期 2保养记录或保险续保后自动更新。累计花费单位¥3.8k 是缩写3860 元——与日志页 ¥3860 单位不一致k 缩写 vs 全量产品化应统一格式化函数避免我的页 3.8k、日志页 3860的困惑。里程的跨页一致性用户卡 12,580 km 与首页一致——产品化保证里程单一数据源用户卡、首页、保养页共用同一里程值加油记录或保养记录更新里程后所有展示同步避免用户卡 12580、首页 12600的矛盾。十、常见问题 FAQ问保险到期提醒和保养提醒是什么关系答两者是双保提醒体系——保养提醒首页按剩余公里触发机油还剩 500km 提醒保险提醒我的页开关按剩余天数触发到期前 30 天提醒续保——一个管车的维护公里维度、一个管车的保障时间维度统计行的2 待办提醒把两类告警整合刹车片超期 保险到期。问为什么要提前 30 天提醒续保答因为续保需要时间决策——提前 30 天足够用户对比多家保险公司报价、选择险种、完成续保不至于到期才匆忙续保可能买贵或漏保。30 天是保险续保提醒的行业常用提前量多数保险公司也是到期前 30 天开始报价与保养剩余 500km的提前量逻辑一致。问统计行的2 待办提醒具体指什么答演示数据设定 2 件待办——①刹车片已超期首页显示已超期 200km②保险即将到期30 天提醒窗口内——都是需要用户尽快处理的事项。产品化后待办数 首页超期/临期保养项目数 保险到期提醒数处理一件记录保养/续保待办数减一。十一、验收与总结本篇对 58-car-maintain 我的页ProfileTab114 行做了逐块拆解五区结构UserCard爱车渐变卡 StatRow负边距统计 InsureCard保险提醒开关 MenuList四菜单 About版本号核心交互保险到期提醒 Switch 开关青蓝选中态、菜单行点击 Toast、悬浮统计行主题色#008080→#4DBABA渐变卡 青色开关品牌统一数据闭环我的页 12/3.8k/2 日志页 12/3860 首页超期保险开关 → 续保提醒12580 贯穿三页我的页是车辆保养提醒的爱车个人中心 双保中枢——身份我的爱车 本田雅阁、总账12 次/3.8k、开关保险续保提醒、工具四菜单一屏收纳。十、扩展思考从双保中心到养车管家我的页的演进方向是养车管家第一是养车成本总览——当前统计只有保养12 次/3.8k演进方向是聚合保养 加油 保险 维修的全部养车成本年支出报告我的页统计从保养账扩展为养车账第二是保险管理增强——当前只有到期提醒开关演进方向是完整保单管理险种、保额、保费、保险公司、到期日保险提醒按到期日 提前天数推送菜单保险提醒是保单管理的入口第三是多车管理——当前只有一辆本田雅阁演进方向是支持多车家用车/公司车/家人车分别保养与保险用户卡展示当前车辆、车辆信息菜单管理车辆列表第四是保养记录提醒联动——2 待办提醒演进方向是待办中心保养超期 保险到期 年检到期全部聚合点击待办直达处理页。这四个方向都从我的页现有的双保结构与统计长出来让双保中心变成养车管家。十一、从设计稿到代码的映射把我的页设计稿翻译成代码有几组典型映射第一爱车身份区映射为渐变卡片加半透明头像——设计稿的青蓝渐变用户卡代码里用渐变背景、半透明白色圆角头像容器、白字我的爱车与车型里程副文案实现第二悬浮统计映射为负边距白卡——设计稿统计行叠在渐变卡底部代码里用上移二十四的负边距加白底描边实现第三保险开关映射为一行文案加开关组件——设计稿的保险提醒开关行代码里用左文案右开关组件选中色设为主青色第四菜单列表映射为循环渲染的行加条件分割线——设计稿四个菜单项用细线分隔代码里用循环生成每行按索引判断最后一行不画线。这四组映射展示了个人中心设计到代码的完整翻译与系列其他个人中心App 53/55/57共用同一套结构模板是骨架统一方法论的具体体现。十二、常见问题 FAQ问保险到期提醒和首页的保养提醒有什么区别答两者是双保的两类提醒——保险提醒按时间到期前 30 天触发保养提醒按里程剩余 500km触发一个管车的保障保险不脱保、一个管车的维护保养不脱保统计行的2 待办提醒把两类告警聚合刹车片超期 保险到期。产品化后两类提醒都通过推送触达用户。问为什么统计行有2 待办提醒而其他个人中心没有答因为保养/保险的待办是本应用的核心价值——车辆保养提醒存在的意义就是在需要时提醒待办数超期保养 到期保险是当前有几件事要处理的直观指标用户打开我的页先看待办数就知道有没有事要做这比单纯的次数/金额统计更行动导向。问提前 30 天提醒续保和待办提醒什么关系答保险进入 30 天提醒窗口即算待办统计行的 2 待办包含保险到期——保险到期前 30 天开始提醒此时它成为待办项续保完成后待办减一。保养同理刹车片超期即待办记录保养后减一两类待办由保险到期窗口 保养超期共同构成。十三、补充要点我的页三个细节再思考第一关于双保菜单的定位。四菜单车辆信息/保险提醒/保养周期/设置中保险提醒与保养周期是双保核心——一个管保险时间维度、一个管保养里程维度两个菜单配合 InsureCard 开关与首页告警形成完整闭环若后续增加年检提醒菜单可扩展为三保。第二关于统计行的口径。12 次/3.8k 是累计全部历史与日志页一致2 待办是当前动态——累计与当前的混合展示历史沉淀 当下行动比纯累计多了现在该做什么的指引是行动导向的统计设计。第三关于青蓝主题的四页贯穿。我的页与首页、保养页、日志页共用青蓝系#008080 主青 #4DBABA 浅青——青蓝贯穿四页让车辆保养提醒应用在系列中以维护青识别主题色是应用的视觉签名。十四、最后总结我的页作为我的爱车的个人中心用五个区域完成了身份、数据、开关、入口、版权的完整呈现青蓝渐变用户卡亮出身份本田雅阁 12580km负边距统计行展示数据12 次/3.8k/2 待办保险到期提醒开关卡提供核心能力提前 30 天续保四菜单提供工具入口车辆/保险/周期/设置版本号收尾。本页在系列个人中心中的独特之处在于双保管理——保养与保险两类提醒一屏管理开关 待办 菜单是养车成本管理最完整的个人中心。十五、补充要点开关与菜单的联动再思考我的页的开关卡与菜单之间存在快捷与完整的互补关系开关卡提供最常用的总闸保险到期提醒开/关而保险提醒菜单是进阶入口管理保单险种/到期日/保险公司——快捷开关解决日常一拨的诉求完整保单页解决深度配置的诉求两者互补而非重复这是设置功能的标准分层快捷层 完整层。另外统计行与待办的呼应也值得注意统计行显示2 待办提醒是数据呈现首页的告警是待办的来源——用户看到有 2 件待办后下一步自然是去首页处理记录保养/续保数据与行动的指引在跨页间衔接我的页告知、首页处理这是个人中心 首页的联动设计。还有菜单的顺序车辆信息看车、保险提醒管保、保养周期配养、设置调偏好从车辆到配置的递进符合先看后管的使用逻辑。开关的青色语义与首页状态卡的青蓝呼应把保险提醒开启与养车安心绑定——开启开关不仅是功能开关也是心理暗示青色 放心这是颜色语义在产品功能上的延伸应用。十六、最后总结我的页解析至此完整收尾爱车信息卡、负边距统计、保险开关、四菜单全部覆盖。读者可重点回顾双保管理的设计——保养提醒里程维度与保险提醒时间维度两类提醒一屏管理开关 待办 菜单是养车成本管理最完整的形态。