ArkUI 声明式保养提醒首页的里程状态卡与三态项目列表App 58「车辆保养提醒」首页HomeTab主题色#008080青蓝teal4 个 Tab 分别为首页、保养、日志、我的。首页采用Header 状态卡 列表三区布局——白色单行 Header保养提醒22 号加粗青蓝渐变状态卡当前里程 26 号加粗 12,580 km 44 号图标 ⚠️ 半透明警告条机油还有 500km 到期刹车片已超期SectionTitle保养项目 4 条保养项目列表️ 机油机滤 还剩 500 km 即将到期橙 / 轮胎更换 还剩 8000 km 正常绿 / 蓄电池检查 还剩 2000 km 正常绿 / 刹车片 已超期 200 km 已超期红每条含 48×48 主色软底图标 项目名 剩余/超期里程 状态胶囊。本篇基于58-car-maintain/entry/src/main/ets/pages/HomeTab.ets共 99 行逐段拆解附 4 张实机截图。一、整体结构三区Header 状态卡 列表布局首页是品牌头部 车辆状态 保养项目的三区布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.StatusCard() this.SectionTitle(保养项目) this.ItemList() } .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) }3 块结构Header— 单行品牌头保养提醒白底固定StatusCard— 青蓝渐变车辆状态卡当前里程 警告条ItemList— 保养项目 4 条保养项目卡片列表首页是保养告警页——先亮出车辆当前里程12,580 km与紧急警告机油 500km 到期、刹车片已超期再列出 4 个保养项目机油机滤/轮胎/蓄电池/刹车片的剩余/超期状态让用户一眼掌握哪些保养该做了、还剩多少公里。相比 App 57 加油记录看油耗/油费本页是保养周期管理——核心是每个保养项目的剩余里程与到期状态。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、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) }单行 22 号加粗、safeTop 10避让状态栏、底部 12 内边距、白底全宽。保养提醒直白点题提醒车辆保养的工具与系列工具型首页App 45 签到墙 / App 53 保修 / App 57 加油同款单行标题范式。三、StatusCard青蓝渐变车辆状态卡StatusCard() { Column({ space: 12 }) { Row() { Column({ space: 4 }) { Text(当前里程).fontSize(13).fontColor(#FFFFFF).opacity(0.9) Text(12,580 km).fontSize(26).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text().fontSize(44) }.width(100%) Row({ space: 8 }) { Text(⚠️).fontSize(14) Text(机油还有 500km 到期刹车片已超期).fontSize(12).fontColor(#FFFFFF).opacity(0.9).layoutWeight(1) } .width(100%).padding(10).backgroundColor(#33FFFFFF).borderRadius(D.rSm) } .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]] })从#008080青蓝渐变到#4DBABA浅青——青色是车辆/专业维护的气质色与机油、保养的工业感契合系列首次使用青色主题。当前里程 26 号加粗12,580 km用 26 号 Bold 白字——车辆当前里程是首页第一信息所有保养项目的到期判断都基于里程千位逗号格式12,580符合里程表读数习惯。 44 号图标右侧大汽车图标——产品符号装饰 点题车辆保养。⚠️ 半透明警告条backgroundColor(#33FFFFFF)白色 20% 透明 ⚠️ 机油还有 500km 到期刹车片已超期——警告条是首页的核心告警把最紧急的两件事单独拎出半透明白底在渐变卡上形成内嵌标签效果与列表的胶囊同手法12 号 90% 白字可读。警告内容与列表联动警告条提到的机油 500km 到期、刹车片已超期正是列表前两条机油机滤即将到期、刹车片已超期——状态卡 紧急项目的汇总告警。四、ItemList三态保养项目列表ItemList() { Column({ space: 10 }) { ForEach(this.items, (m: MaintainItem) { Row({ space: 12 }) { Row() { Text(m.emoji).fontSize(24) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Text(m.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text) Text(m.nextKm 0 ? 还剩 m.nextKm km : 已超期 (-m.nextKm) km) .fontSize(12).fontColor(m.statusColor) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(m.status).fontSize(11).fontColor(m.statusColor) .padding({ left: 8, right: 8, top: 3, bottom: 3 }) .backgroundColor(m.statusColor 22).borderRadius(6) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: m.name }); }) }, (m: MaintainItem) m.id.toString()) }.width(100%) }4 个保养项目数据21-26 行项目剩余/超期状态颜色️ 机油机滤还剩 500 km即将到期橙 轮胎更换还剩 8000 km正常绿 蓄电池检查还剩 2000 km正常绿 刹车片已超期 200 km已超期红卡片细节48×48 主色软底图标块backgroundColor(C.primarySoft)#E0F5F5浅青 24 号 emoji——浅青圆角底每个项目一个专属 emoji️ 机油/ 轮胎/ 电池/ 刹车项目类型一眼可辨。三态剩余/超期m.nextKm 0 ? 还剩 N km : 已超期 N km——正数显示还剩、负数转正显示已超期-200 → 已超期 200 km副行颜色用状态色橙/绿/红——剩余里程 状态色的双编码与 App 53 保修的三态同手法。状态胶囊右侧m.status即将到期/正常/已超期——字色 透明底色胶囊statusColor 22≈ 13% 透明底三态红橙绿正常绿、即将到期橙、已超期红。剩余里程差500 / 8000 / 2000 / -200——覆盖临期/充足/超期三种状态机油 500km 临期、轮胎 8000km 充足、刹车片超期 200km警示优先级一目了然。整卡点击点击 Toast 项目名机油机滤——产品化后跳保养详情/记录页。五、跨页数据自洽保养数字的全局闭环首页数据与保养、日志、我的三页形成完整闭环首页当前里程 12,580 km↔ 保养页保养里程 12580、我的页本田雅阁 · 12,580 km——里程完全一致12,580 km 贯穿三页首页展示、保养页录入、我的页标识。首页刹车片已超期 200km↔ 状态卡警告条——首页的刹车片超期正是状态卡警告条提到的刹车片已超期列表明细 → 状态卡汇总。首页机油机滤 500km↔ 状态卡机油还有 500km 到期——剩余里程一致500km警告条 列表最紧急项的放大。首页机油机滤↔ 日志页机油机滤更换 12080 km ¥480——日志页记录的是最近一次机油保养2026-07-28 在 12080 km首页还剩 500km由上次保养里程12080 周期推算下次约 13080当前 12580 还剩 500保养日志 → 剩余里程推算。首页刹车片已超期↔ 保养页刹车片项目——保养页可记录刹车片更换记录后首页状态更新记录 → 状态刷新。六、系列横向对比车辆工具三兄弟把 58 的首页放进系列对比特点鲜明App 58 车辆保养提醒青#008080里程状态卡 三态保养列表——保养周期式首页首屏即剩余里程告警。App 57 加油记录橙#FF6B35油耗卡 快查统计——油耗性能式首页。App 56 停车记录深灰#2D3436费用汇总 双态列表——出行费用式首页。App 53 保修管理绿#00A862三态汇总 商品列表——保修周期式首页。58 与 53 都是剩余里程/天数的三态告警首页在保绿/临期橙/超期红但对象不同53 是商品保修剩余天数、58 是车辆保养剩余公里——同一告警模型、不同计量单位天 vs km。58 的差异化在于**状态卡带警告条**渐变卡内嵌 ⚠️ 半透明警告条把最紧急的两件事单独提示比纯列表多一层总告警且警告条内容与列表首条联动这是系列中告警卡的加强版。七、开发者避坑保养列表的四个细节从 HomeTab 的实现提炼四个易踩坑点剩余里程动态计算nextKm是写死的500/8000/2000/-200——产品化由下次保养里程 - 当前里程实时计算下次保养里程 上次保养里程 保养周期随当前里程加油记录同步每天变化跨过 0 时状态自动从即将到期变已超期。负数转正的展示已超期 (-m.nextKm) km——超期用负值存储、展示时取负转正-200 → 200数据结构用负数表示超出多少与 App 53 的 daysLeft 负数同手法判断状态看正负、展示文案取绝对值。三态阈值当前状态是数据写死即将到期/正常/已超期——产品化按 nextKm 动态判定1000 正常、≤1000 即将到期、≤0 已超期阈值1000km应由保养周期配置驱动避免列表标正常但用户觉得该保养的矛盾。警告条的内容生成警告条文案是写死的——产品化由列表动态生成取最紧急的 1-2 项拼接XX 还有 N km 到期YY 已超期保证警告条与列表实时同步避免警告说刹车片但列表刹车片更新了的不同步。八、常见问题 FAQ问12,580 km 是什么时候的里程答演示数据设定为当前里程车辆最新的仪表读数来自最近一次加油/保养记录——所有保养项目的还剩多少公里都以它为基准计算。产品化后当前里程与加油记录同步每次加油更新里程保养剩余里程实时刷新。问为什么机油还有 500km、刹车片却已超期 200km答两个项目的保养周期不同——机油机滤每 5000 公里换一次上次 12080 换的下次约 17080演示简化设定下次 13080当前 12580 还剩 500刹车片通常 2-3 万公里换但演示设定已到周期当前里程超过计划保养里程 200km 说明车主超期未换——不同项目周期各异列表展示各自的剩余/超期状态。问状态卡的颜色青蓝和状态颜色红橙绿是什么关系答主题色青蓝是应用的脸品牌色用于渐变卡、图标底、选中态红橙绿是状态语义色正常绿/即将到期橙/已超期红用于项目状态——两套色系分工主题色管页面的整体观感、状态色管具体项目的好坏互不冲突App 53/55 同手法。九、验收与总结本篇对 58-car-maintain 首页HomeTab99 行做了逐块拆解三区结构Header保养提醒 StatusCard青蓝渐变状态卡 警告条 ItemList三态保养项目列表核心交互保养项目点击 Toast详情入口、状态胶囊三态橙/绿/红主题色#008080青蓝 →#4DBABA浅青渐变警告条半透明白底数据闭环首页 12580 → 保养页 12580 → 日志页 12080周期警告条 列表紧急项汇总首页是车辆保养提醒的告警总览——先看当前里程12,580 km、再读紧急警告机油 500km/刹车片超期、最后扫全部项目4 项红橙绿一屏完成哪些保养该做了的完整认知。十、扩展思考从保养提醒到车辆健康管家首页的保养数据可以演进成车辆健康管家第一是保养计划自动生成——当前 4 个项目的剩余里程是独立展示演进方向是按保养周期自动排程机油每 5000km、刹车片每 3 万 km、蓄电池每 2 万 km 自动生成下次保养计划形成保养日历首页的项目列表是自动排程的展示第二是异常预警分级——刹车片已超期红色应该比机油即将到期橙色更紧急演进方向是紧急度分级推送超期项目每日提醒、临期项目每周提醒首页的三态颜色是分级的基础第三是保养费用预估——每个项目到期前预估费用机油保养约 500 元、刹车片更换约 800 元演进方向是下次保养预算本月机油到期预算 500 元让用户对养车成本有预期第四是车辆健康分——综合各项目状态生成车辆健康分刹车片超期扣 20 分、机油临期扣 10 分演进方向是首页顶部展示健康分90 分 良好让用户一眼知道车整体状态好不好。这四个方向都从首页已有的保养项目状态长出来让提醒保养变成管理健康。十一、从设计稿到代码的映射把首页设计稿翻译成代码有几组典型的映射第一渐变状态卡映射为渐变色容器加两级文本加警告条——设计稿顶部的青蓝渐变卡代码里用渐变背景容器内放里程标签与 26 号数值、右侧汽车图标、底部半透明警告条第二三态剩余里程映射为条件判断切换文案与颜色——设计稿里正常绿、临期橙、超期红代码里用剩余里程正负与状态色字段控制文字还剩/已超期与颜色第三状态胶囊映射为字色加透明底色容器——设计稿的项目状态标签代码里用状态色文字加状态色透明底的小胶囊第四图标块映射为浅青圆角容器——设计稿的保养项目图标块代码里用四十八乘四十八浅青底加十圆角容器内嵌表情图标。这四组映射说明设计稿的每个视觉差异颜色、文案、胶囊在代码里都有对应的条件逻辑与属性差异好的还原度来自设计参数到代码逻辑的完整对应。十二、常见问题 FAQ问为什么机油和刹车片的剩余里程差这么多答因为两个项目的保养周期不同——机油机滤的更换周期短约 5000 公里上次 12080 km 换的下次约 13080 km当前 12580 还剩 500 km刹车片的更换周期长约 3 万公里但演示数据设定它的计划保养里程已过当前里程超过计划里程 200 km 说明超期未换——不同项目周期各异剩余里程反映各自距下次保养还差多少。问首页的当前里程 12,580 km会变化吗答演示数据写死 12,580 km产品化后当前里程与加油记录同步每次加油更新仪表里程当前里程变化后所有保养项目的剩余里程实时刷新剩余 下次保养里程 - 当前里程车辆开到 13,080 km 时机油还剩 0km到期、再开就变已超期。问状态卡的警告条为什么只提机油和刹车片答因为这两个是最紧急的项目——机油还剩 500km即将到期和刹车片已超期已超期是 4 个项目中需要马上关注的两个警告条把最紧急的 1-2 项单独提示而不是把 4 项全列出来那样就不叫警告了。产品化后警告条动态取最紧急的前两项生成文案与列表实时同步。十三、补充要点首页三个细节再思考第一关于警告条的半透明设计。警告条用白色百分之二十透明底#33FFFFFF内嵌在渐变卡中——卡中卡的层次感让警告条从渐变背景中浮出来但不突兀与列表胶囊的半透明底同手法若用纯白底会显得生硬、若不用底则警告文字直接压在渐变上可读性差半透明底是内嵌标签的标准处理。第二关于里程的千位格式。12,580 km用千位逗号12,580——汽车仪表里程表通常显示千位分隔符合用户阅读里程的习惯12580 三位数以上无分隔易读错产品化应统一里程格式化千位逗号。第三关于三态颜色的语义强度。红色已超期 橙色即将到期 绿色正常——三种颜色的视觉重量递减对应紧急度递减超期最紧急、临期次之、正常不打扰用户扫列表时红色最先被注意这与 App 53 保修的三态绿/橙/红完全一致系列状态三色语义统一。十四、最后总结首页作为车辆保养提醒的第一屏承担着告警总览的职责——用青蓝渐变状态卡交代当前里程12,580 km与紧急警告机油 500km/刹车片超期用三态保养项目列表交代 4 个项目的剩余/超期状态机油橙、轮胎绿、电池绿、刹车红。整页的视觉语言围绕剩余里程展开里程 26 号大字是基准、警告条是总告警、三态胶囊是分项状态三层表达让用户既看到车现在什么里程也看到哪些保养该做了。从演示到产品这个骨架预留了完整升级空间剩余里程可以实时计算、保养计划可以自动排程、警告条可以动态生成、健康分可以综合评估。作为系列第 58 号应用它延续了骨架统一、亮点各异、数据自洽的方法论——青蓝渐变是视觉签名、三态告警是产品灵魂、四页同源是数据保证。车辆保养提醒的本质不是记录保养而是在保养到期前提醒你、让你不脱保首页就是这层守护的第一道防线。十五、补充要点状态卡与列表的联动再思考状态卡与保养项目列表之间除了告警对账还有一层视觉引导的关系状态卡的警告条机油还有 500km 到期刹车片已超期恰好是列表中最紧急的两项机油机滤橙色即将到期、刹车片红色已超期——警告条给最紧急的事、列表给全部项目状态两级信息层级完成聚焦到浏览的引导。另外列表顺序也值得注意机油机滤500km 临期排第一、刹车片已超期排最后——演示数据按项目重要性排列机油是最频繁的保养产品化建议按紧急度排序刹车片超期应置顶红色最紧急的排最上让用户优先看到最该处理的项目。还有一点警告条的文字用 12 号、列表副行也用 12 号——两处同字号但警告条是白字渐变卡上、列表副行是彩色白卡上白字警告比彩色副行更醒目高对比符合警告要突出的设计。这些联动细节共同说明首页不是静态数据陈列而是一套总告警到分项目的引导系统每个颜色、每个顺序都在为用户导航。十六、最后总结首页解析至此完整收尾从青蓝渐变状态卡到警告条从三态保养项目列表到紧急度排序全部要点均已覆盖。读者可对照源码逐行验证文中引用的代码片段——状态卡的里程大字与半透明警告条、三态剩余里程的条件渲染、状态胶囊的透明底色理解保养告警首页的设计思路。车辆保养提醒的首页是一扇窗透过 12,580 km 的当前里程、机油与刹车片的紧急警告和四张保养项目卡车主看清了车辆当前最需要处理的保养事项这是车辆保养提醒应用价值的第一落点。