HarmonyOS 6.0实战加油记录我的页 —— 爱车信息卡与负边距统计行组合技App 57「加油记录」我的页ProfileTab主题色#FF6B35活力橙。本页是车主我的爱车的个人中心——橙色渐变用户卡 64×64 半透明圆头像 我的爱车18 号 Bold 大众朗逸 · 沪A·88888负边距统计行68 加油次数 / ¥28k 累计油费 / 38k 总里程上移 24 悬浮四菜单列表 车辆档案 / 加油历史 / ⏰ 保养提醒 / ⚙️ 设置0.5 Divider 分隔底部版本号加油记录 Version 1.0.0。本篇基于57-fuel-log/entry/src/main/ets/pages/ProfileTab.ets共 98 行逐段拆解附 4 张实机截图。一、整体结构四区用户卡 统计 菜单 版本布局我的页是爱车信息 数据统计 工具入口的四区布局——4 个 Builder 块build() { Column() { Scroll() { Column() { this.UserCard() this.StatRow() 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) }4 块结构UserCard— 橙色渐变用户卡爱车身份 车型车牌StatRow— 负边距三列统计行次数/费用/里程MenuList— 四工具菜单档案/历史/提醒/设置About— 底部版本信息我的页是爱车个人中心——先亮身份我的爱车 大众朗逸·沪A·88888、再看统计68 次/28k/38k、最后进工具菜单。与 App 56 停车记录我的页结构一致但身份是车而非车主我的爱车 车型 车牌菜单含保养提醒车辆维护场景专属体现车辆管理的产品定位。项目源码开源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(大众朗逸 · 沪A·88888).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]] })——从#FF6B35渐变到#FFA078与首页油耗卡同款渐变活力橙主题统一。64×64 半透明圆头像backgroundColor(#33FFFFFF)——白色 20% 透明圆角 32 头像底 32 号居中。汽车即产品符号与 Tab 图标对应。爱车身份 车型车牌副文案18 号 Bold 白字我的爱车昵称 12 号 85% 白字大众朗逸 · 沪A·88888车型 车牌——我的爱车以车为名区别于 App 56 的车主小李车型大众朗逸 车牌沪A·88888是车辆档案的核心信息。底部留白 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)三列——68加油次数/ ¥28k累计油费/ 38k总里程每列 18 号 Bold 数值 11 号淡灰标签。数据一致性68 次 累计加油次数、¥28k 全部历史油费约 28000 元、38k 累计行驶里程约 38000 km——三个累计口径次数/金额/里程与首页的最近 3 次/本月分层。三列数据15-19 行68 加油次数累计全部历史加油¥28k 累计油费全部历史油费约 28000 元38k 总里程累计行驶里程约 38000 km四、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: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }4 个菜单项21-26 行 车辆档案 — 管理车辆信息车型、车牌、油品 加油历史 — 查看全部加油记录⏰ 保养提醒 — 设置保养周期与提醒⚙️ 设置 — 应用偏好配置技术拆解左 emoji 中标题 右箭头18 号 emoji⏰⚙️ 14 号标题 箭头——标准列表行。0.5 细 Divideridx length - 1判断后插入——最后一项不画线整宽细线分隔。整行点击点击 Toast 菜单名——产品化后跳对应功能页车辆档案 ↔ 用户卡车型车牌管理、加油历史 ↔ 首页完整记录列表。保养提醒是车辆场景专属⏰ 保养提醒菜单设置保养里程/周期到里程提醒保养——其他应用没有保养概念体现加油记录向车辆管理扩展的方向。五、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 一致个人中心标准收尾。六、跨页数据自洽个人中心的全局闭环我的页与首页、加油、分析三页形成完整闭环我的页68 次↔ 首页3 条最近记录——68 是累计加油次数、首页 3 条是最近记录累计 vs 近期的时间分层。我的页¥28k 累计油费↔ 分析页¥4668 半年——半年 4668 是累计 28000 的一部分最近 6 个月半年统计 → 累计总量。我的页38k 总里程↔ 首页12580 km里程——38k 是累计里程、12580 是当前仪表里程最近记录累计 vs 当前口径。用户卡大众朗逸 · 沪A·88888↔ 菜单车辆档案——用户卡展示车型车牌、车辆档案菜单管理车辆信息展示与管理的配对。菜单加油历史↔ 首页加油记录列表——加油历史菜单是完整记录列表入口首页只展示最近 3 条首页轻展示、菜单看全量。菜单保养提醒↔ 车辆维护——保养提醒按里程如每 5000 公里触发与加油记录的里程数据联动里程到了提醒保养加油记录是保养提醒的数据基础。七、系列横向对比车主类个人中心两种风格系列中车主/车辆型个人中心对比App 57 加油记录橙#FF6B35爱车卡 统计 四菜单——爱车型身份是我的爱车菜单含保养提醒。App 56 停车记录深灰#2D3436车主卡 统计 四菜单——车主型身份是车主小李菜单含常用地点。App 52 票据管家蓝#0066CC渐变卡 统计 五菜单——财务型。57 与 56 是车主应用双子星56 停车、57 加油个人中心都围绕车辆组织但身份视角不同56 是车主视角车主小李 车牌、57 是车辆视角我的爱车 车型 车牌——57 的用户卡信息更丰富车型大众朗逸菜单多了保养提醒加油记录驱动保养里程体现加油 → 车辆健康的扩展方向。统计行的38k 总里程是车辆类应用独有的维度其他应用无里程概念。八、开发者避坑个人中心四个细节从 ProfileTab 的实现提炼四个易踩坑点车辆档案的多车支持当前只有一辆车大众朗逸——产品化应支持多车管理每辆车独立加油记录与统计用户卡展示当前车辆、车辆档案菜单管理车辆列表切换车辆后首页/分析的数据跟随切换。统计值动态化68/28k/38k 都是写死的——产品化由数据源实时聚合加油次数 记录条数、累计油费 金额汇总、总里程 最近记录里程新增记录后自动更新。保养提醒的里程逻辑保养提醒菜单当前是占位——产品化按上次保养里程 保养周期计算下次保养里程当前里程最近加油记录达到后推送提醒需要与加油记录的里程数据联动。累计单位统一¥28k金额缩写与 38k里程千单位——k 在不同字段含义不同金额 28k 28000 元、里程 38k 38000 km产品化应明确单位金额用 ¥ 缩写、里程用 km避免用户混淆 k 的含义。九、常见问题 FAQ问我的爱车和 App 56 的车主小李有什么不同答两个应用都面向车主但身份视角不同——App 56 停车记录以车主为主体车主小李 车牌 停车次数App 57 加油记录以车辆为主体我的爱车 车型 车牌 油费/里程因为加油数据天然归属于车车的油耗、车的里程以车为身份更贴合数据组织方式。问累计油费 ¥28k 和总里程 38k 是什么关系答¥28k 是全部历史加油费用累计约 28000 元、38k 是全部历史行驶里程累计约 38000 km——28k ÷ 38k ≈ 0.74 元/km与首页每公里成本 ¥0.72基本一致累计口径两个累计数据互为印证也说明油费与里程是加油记录的两大支柱数据。问保养提醒菜单是做什么的答演示版本只是占位Toast产品化后按保养周期如每 5000 公里或每半年设置提醒——车辆行驶里程从加油记录获取达到保养节点时推送该保养了把加油记录的价值延伸到车辆维护加油时看里程 → 里程到点提醒保养是加油记录向车辆管家扩展的核心功能。十、验收与总结本篇对 57-fuel-log 我的页ProfileTab98 行做了逐块拆解四区结构UserCard爱车渐变卡 StatRow负边距统计 MenuList四菜单 About版本号核心交互菜单行点击 Toast档案/历史/提醒/设置、悬浮统计行主题色#FF6B35→#FFA078渐变卡活力橙主题贯穿数据闭环我的页 68/28k/38k 首页 3 条/12580 分析页 4668车辆信息贯穿用户卡与车辆档案菜单我的页是加油记录的爱车个人中心——身份我的爱车 大众朗逸、总账68 次/28k/38k、工具四菜单一屏收纳。十、扩展思考从爱车中心到车辆管家我的页的演进方向是车辆管家第一是多车管理——当前只有一辆大众朗逸演进方向是支持多车家用车/公司车/家人车分别记录油耗与油费用户卡展示当前车辆、车辆档案菜单管理车辆列表切换车辆后首页与分析数据跟随切换第二是车辆健康档案——加油记录之外聚合保养记录、维修记录、年检到期形成一车一档的完整生命周期档案何时保养、何时维修、何时年检我的页的保养提醒是健康档案的入口第三是驾驶行为总结——68 次加油、38k 里程演进方向是年均里程、年均油费、油耗趋势的年度报告今年开了多少、花了多少、油耗变化让用户对车辆使用有年度视角第四是车辆金融——累计油费 28k 演进方向是养车成本全览油费 保险 保养 维修用户卡统计从加油账扩展到养车账。这四个方向都从我的页现有的车辆信息与统计长出来让爱车中心变成车辆管家。十一、从设计稿到代码的映射把我的页设计稿翻译成代码有几组典型映射第一爱车身份区映射为渐变卡片加半透明头像——设计稿的橙色渐变用户卡代码里用渐变背景、半透明白色圆角头像容器、白字我的爱车与车型车牌副文案实现第二悬浮统计映射为负边距白卡——设计稿统计行叠在渐变卡底部代码里用上移二十四的负边距加白底描边实现第三菜单列表映射为循环渲染的行加条件分割线——设计稿四个菜单项用细线分隔代码里用循环生成每行按索引判断最后一行不画线第四版本信息映射为两个淡灰小字——设计稿底部的应用名与版本号代码里用两个透明度递减的淡灰文本实现。这四组映射展示了个人中心设计到代码的完整翻译与系列其他个人中心App 52/53/56共用同一套结构模板是骨架统一方法论的具体体现。十二、常见问题 FAQ问为什么用户卡叫我的爱车而不是车主名字答因为加油数据的归属主体是车——油耗、里程、油费都是车辆维度同一辆车开不同的司机油耗数据一致以车为身份我的爱车更贴合数据组织同时爱车的称呼比车辆信息更有情感车主对车的昵称化产品调性更亲切。若产品支持多车用户卡会展示当前选中的车如大众朗逸 · 沪A·88888与车辆档案菜单的车辆切换配合。问总里程 38k 和首页的 12580 km 冲突吗答不冲突——38k 是累计总里程约 38000 公里全部历史加油记录推得的车辆总行驶里程12580 km 是最近一次加油的仪表读数当前里程。演示数据的 12580 与 38k 存在量级差12580 是近期读数、38k 是累计统计口径产品化后两者应一致累计里程 最近一次记录的里程数据口径需统一。问保养提醒的保养具体指什么答指车辆的定期保养更换机油、机滤、检查车况等通常按每 5000 公里或每半年周期进行——保养提醒菜单按上次保养里程 周期计算下次保养里程当加油记录的当前里程达到保养节点时推送提醒该保养了。加油记录频繁记录里程是保养里程的数据来源所以加油应用延伸保养提醒是自然的产品扩展。十三、补充要点我的页三个细节再思考第一关于车辆视角的身份设计。用户卡我的爱车 大众朗逸 沪A·88888三层信息昵称/车型/车牌——昵称给情感我的爱车、车型给标识大众朗逸、车牌给唯一性沪A·88888三层由虚到实用户对车的认知逐步具体这是车辆个人中心比车主个人中心App 56信息更丰富的设计。第二关于统计口径的累计属性。68 次/28k/38k 都是累计全部历史——与首页的最近 3 次/本月 1035分层我的页回答总共加了多少次油、总共花了多少钱、总共跑了多远车辆全生命周期首页回答最近/本月近期状态累计与近期互补。第三关于橙色主题的四页贯穿。我的页与首页、加油页、分析页共用橙色系#FF6B35 主橙 #FFA078 浅橙——活力橙贯穿四页让加油记录应用在系列中以能源橙识别对比 App 56 的深灰、App 52 的科技蓝主题色是应用的视觉签名。十四、最后总结我的页作为我的爱车的个人中心用四个区域完成了身份、数据、入口、版权的完整呈现橙色渐变用户卡亮出身份大众朗逸 沪A·88888负边距统计行展示数据68 次/28k/38k四菜单提供工具入口档案/历史/提醒/设置版本号收尾。本页在系列个人中心中的独特之处在于车辆身份 保养提醒——加油记录的用户以车为身份统计是车辆维度次数/油费/里程菜单含保养提醒加油记录驱动保养体现加油 → 车辆健康的产品延伸。十五、补充要点爱车身份与统计的细节再思考第一关于我的爱车的情感化命名。用户卡用我的爱车而非车辆档案或车辆一——爱车是车主对车辆的情感化称呼很多车主给自己的车起名字用我的爱车让个人中心有温度与车主小李App 56 的人物化、票据管家App 52 的角色化一样系列个人中心的身份命名都人格化/情感化而非冷冰冰的用户/车辆。第二关于三列统计的单位差异。68 次次数、¥28k金额、38k里程——三个累计数据单位不同次/元/km正好覆盖加油记录的三大维度频次/费用/距离用户从三列就能回答加了多少次油、花了多少钱、跑了多远三个问题统计行的列数3与维度数3匹配不多不少。第三关于保养提醒的位置。保养提醒放在菜单第 3 位档案/历史/提醒/设置——提醒是记录之后的功能先有加油记录、再有保养提醒排在历史数据查看之后、设置系统配置之前菜单顺序体现数据 → 提醒 → 配置的产品逻辑若保养提醒排在前面会显得功能还未落地就重点宣传当前顺序恰当。这三个细节共同保证我的页有温度、有维度、有层次。十六、最后总结我的页解析至此完整收尾爱车信息卡、负边距统计、四菜单、版本号全部覆盖。读者可重点回顾车辆身份 保养提醒的设计——我的爱车车型 车牌让加油数据以车为归属保养提醒菜单让加油记录延伸至车辆维护。爱车身份与保养提醒是本篇核心亮点读者可对照源码重点回顾。