鸿蒙应用开发：加油记录首页的渐变油耗卡与三列快查统计

App 57「加油记录」首页（HomeTab），主题色 #FF6B35 活力橙，4 个 Tab 分别为首页（⛽）、加油（📝）、分析（📊）、我的（👤）。首页采用"Header + 油耗卡 + 快查统计 + 列表"四区布局——白色单行 Header（"加油记录"22 号加粗） + 橙色渐变油耗卡（7.2 34 号加粗白字 + "平均油耗 L/100km" + ⛽ 48 号大图标） + 三列快查统计（¥1035 本月油费 / 1020km 本月里程 / ¥0.72 每公里成本） + SectionTitle（加油记录）+ 3 条加油记录列表（45.2 L · 12580 km 08-12 ¥342 / 42.8 L · 12080 km 07-28 ¥325 / 48.5 L · 11560 km 07-14 ¥368，每条含 46×46 主色软底图标 + 油量·里程 + 日期 + 金额）。本篇基于 57-fuel-log/entry/src/main/ets/pages/HomeTab.ets（共 112 行）逐段拆解，附 4 张实机截图。

一、整体结构：四区"Header + 油耗卡 + 快查 + 列表"布局

首页是"品牌头部 + 油耗总览 + 快捷统计 + 加油列表"的四区布局——4 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.FuelCard()
        this.QuickStats()
        this.SectionTitle('加油记录')
        this.RecordList()
      }
      .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)
}

4 块结构：

1. Header — 单行品牌头（"加油记录"），白底固定
2. FuelCard — 橙色渐变油耗卡（平均油耗 7.2）
3. QuickStats — 三列快查统计（油费/里程/成本）
4. RecordList — "加油记录" + 3 条加油记录卡片列表

首页是"油耗总览页"——先亮出当前车辆的平均油耗（7.2 L/100km，首页最核心的数字），再给出本月油费（¥1035）、本月里程（1020km）、每公里成本（¥0.72）三列快查，最后列出最近 3 次加油记录（油量/里程/日期/金额）。相比 App 56 停车记录（记录"停哪花多少"），本页是"油耗 + 油费"的双核心——既看"车费不费油"（油耗），也看"油钱花了多少"（金额）。

项目源码开源：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 52 票据 / App 56 停车记录）同款单行标题范式。

三、FuelCard：橙色渐变油耗卡

FuelCard() {
  Row({ space: 16 }) {
    Column({ space: 4 }) {
      Text('7.2').fontSize(34).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('平均油耗 L/100km').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    Text('⛽').fontSize(48)
  }
  .width('100%').padding(20).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
}

技术拆解：

1. 橙色渐变：linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) 从 #FF6B35 活力橙渐变到 #FFA078 浅橙——橙色是"能源/燃油"的直觉色（加油站、火焰、动力的联想），与加油场景高度契合，系列首次使用橙色主题。
2. 主数值 34 号加粗：7.2 用 34 号 Bold 白字——平均油耗是首页第一信息（用户最关心"车百公里耗几升油"），数字大而醒目。
3. ⛽ 48 号大图标：右侧大号加油站图标——产品符号（与 Tab 图标、记录列表一致），48 号在卡内起装饰 + 点题作用（一眼识别这是"油"相关）。
4. 油耗单位："平均油耗 L/100km"12 号 90%——单位说明（升每百公里），汽车油耗的标准计量，与数字 7.2 组合成完整信息（百公里耗 7.2 升）。
5. 与系列对比：首页主卡从"金额汇总"（App 52/56 的 32 号金额）变为"数值指标"（油耗 7.2）——油耗是"性能指标"而非"金额"，卡片表达的是"车况"而非"账单"，这是加油记录应用区别于停车/票据应用的核心差异。

四、QuickStats：三列快查统计

QuickStats() {
  Row({ space: 10 }) {
    Column({ space: 4 }) {
      Text('¥1035').fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.primary)
      Text('本月油费').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('1020km').fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.accent)
      Text('本月里程').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('¥0.72').fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.ok)
      Text('每公里成本').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
  }.width('100%')
}

技术拆解：

1. 三列均分：Row({ space: 10 }) + 三个 layoutWeight(1) Column——**本月油费（¥1035）/ 本月里程（1020km）/ 每公里成本（¥0.72）**三列 1:1:1，每列白卡圆角 14 描边、上下 14 内边距。
2. 三色数值：油费橙（C.primary）、里程浅橙（C.accent）、成本绿（C.ok）——数值用三种语义色（油费 = 主题橙、里程 = 浅橙、每公里成本 = 绿色暗示"不算贵"），与 App 54/55 的"数值着色"手法一致。
3. 指标关系：本月油费（1035 元）÷ 本月里程（1020km）≈ 1.01 元/km——但演示"每公里成本 ¥0.72"是全量平均（累计油费 ÷ 累计里程），与月度口径不同，三列是"月 + 月 + 均"的混合快查。
4. 快查定位：三列是"不用点进分析页就能看的日常指标"——油费（花多少）、里程（跑多远）、成本（费不费），覆盖车主最常问的三个问题。

五、RecordList：加油记录列表

RecordList() {
  Column({ space: 10 }) {
    ForEach(this.records, (r: FuelRecord) => {
      Row({ space: 12 }) {
        Row() { Text('⛽').fontSize(22) }
        .width(46).height(46).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
        Column({ space: 3 }) {
          Text(r.liters + ' L · ' + r.mileage + ' km').fontSize(14).fontColor(C.text)
          Text(r.date).fontSize(12).fontColor(C.textDim)
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('¥' + r.amount).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text)
      }
      .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (r: FuelRecord) => r.id.toString())
  }.width('100%')
}

3 条加油记录数据（20-24 行）：

加油量	里程	日期	金额
45.2 L	12580 km	08-12	¥342
42.8 L	12080 km	07-28	¥325
48.5 L	11560 km	07-14	¥368

卡片细节：

1. 46×46 主色软底图标块：backgroundColor(C.primarySoft)（#FFEDE5 浅橙）+ 22 号 ⛽——浅橙圆角底 + 加油站图标，每条记录同用 ⛽（加油记录都是加油，无需区分类型）。
2. 油量·里程主行：14 号"45.2 L · 12580 km"——油量（加了多少升）与里程（当前仪表里程）拼接，layoutWeight(1) 撑开。
3. 日期副行：12 号淡灰"08-12"——加油日期（倒序：08-12 → 07-28 → 07-14，最近在前）。
4. 金额右对齐：15 号 Bold ¥342——金额右对齐（财务惯例），加粗突出。
5. 里程递增自洽：11560 → 12080 → 12580 km——三次加油的里程递增（车越开越远），里程差对应行驶里程（12080 - 11560 = 520km 等），数据符合车辆行驶逻辑。
6. 无 onClick：列表纯展示（点击无交互）——产品化后点击看记录详情。

六、跨页数据自洽：油耗数字的全局闭环

首页数据与加油、分析、我的三页形成完整闭环：

• 首页"平均油耗 7.2" ↔ 分析页"平均油耗 7.2"——数值完全一致（7.2 L/100km），首页给当前油耗、分析页给油耗趋势（3-8 月 7.1-7.8 波动，8 月 7.2 收尾）。
• 首页"本月油费 ¥1035" ↔ 分析页"8月油费 ¥1035"——金额完全一致（1035 元），首页"本月"= 分析页"8 月"，柱状图最后一根（8 月）与首页对上。
• 首页"本月里程 1020km" ↔ 加油记录里程差——本月里程由加油记录推算（近期里程 12580 - 上月 11560 ≈ 1020km），里程记录 → 月度里程。
• 首页"¥0.72 每公里成本" ↔ 分析页"半年油费 ¥4668"——每公里成本 = 油费 ÷ 里程（累计口径），分析页半年油费 4668 元 = 680+720+850+690+693+1035（3-8 月逐月之和），月度累计 → 半年汇总。
• 首页 3 条加油记录 ↔ 我的页"68 次"累计——首页是"最近 3 次"、我的页是"累计 68 次"，近期展示 vs 总量统计。

七、系列横向对比：橙系工具首页与系列差异

把 57 的首页放进系列对比，特点鲜明：

• App 57 加油记录（橙 #FF6B35）：油耗卡 + 三列快查 + 加油列表——"性能指标"式首页，首屏即油耗。
• App 56 停车记录（深灰 #2D3436）：费用汇总 + 双态列表——"出行费用"式首页。
• App 55 续费提醒（红 #FF6B6B）：扣款预警 + 临期列表——"支出预警"式首页。
• App 52 电子票据（蓝 #0066CC）：金额汇总 + 票据列表——"财务管理"式首页。

57 与 56 同为"车主工具"（56 停车、57 加油），但核心指标不同：56 看"停车费"（金额）、57 看"油耗"（性能指标）——57 的首页主卡是"平均油耗 7.2"而非金额，快查统计（油费/里程/成本）是"金额 + 距离 + 单位成本"的组合，这是车辆维护类应用独有的首页形态（关注"车况"多于"账单"）。活力橙主题是系列首次，与"能源/动力"的场景契合。

八、开发者避坑：油耗首页的四个细节

从 HomeTab 的实现提炼四个易踩坑点：

1. 油耗计算口径：平均油耗 7.2 是写死的——产品化由加油记录计算（加满油箱时记录油量与里程差，油耗 = 油量 ÷ 里程差 × 100），且"加满"才有精确油耗（非加满记录无法准确计算），加油页的"加满油箱"开关正是为此设计。
2. 里程递增校验：记录里程应单调递增（11560 < 12080 < 12580）——产品化需校验新记录的里程 > 上次记录（否则里程差为负、油耗计算错误），加油页录入里程时校验。
3. 每公里成本的单位：¥0.72 是"元/公里"——与油耗（L/100km）单位不同（成本按元、油耗按升），两个指标易混淆，产品化应明确标注单位并区分计算逻辑（成本 = 油费 ÷ 里程，油耗 = 油量 ÷ 里程差 × 100）。
4. 金额小数位：Text('¥' + r.amount) 金额为整数（342）——产品化用两位小数（342.00），与加油页的单价（7.58 元/L）精度一致。

九、常见问题 FAQ

问：平均油耗 7.2 L/100km 是好还是坏？答：7.2 升每百公里对家用轿车是中等偏优的水平——小型车（如大众朗逸）综合油耗通常在 6-8 之间，7.2 属于正常偏经济；SUV 或性能车通常在 9 以上。油耗高低受车型、路况、驾驶习惯影响，车主可通过记录对比"我的油耗趋势"判断车况是否正常。

问：三列快查的每公里成本 ¥0.72 是怎么算的？答：演示数据的每公里成本是"累计油费 ÷ 累计里程"的平均值（约 0.72 元/km）——与"本月油费 1035 元 ÷ 本月里程 1020km ≈ 1.01 元/km"的月度口径不同（月度数据受油价波动和里程分布影响）。产品化后应明确"每公里成本"的计算口径（累计 or 月度），避免两个数字打架。

问：为什么加油记录只有 3 条而我的页有 68 次？答：首页展示"最近 3 次加油"（近一个月左右），我的页的"68 次"是累计加油次数（全部历史）——首页聚焦"最近记录"、我的页聚焦"累计总量"，时间范围分层，与系列其他应用（最近列表 vs 累计统计）一致。

十、验收与总结

本篇对 57-fuel-log 首页（HomeTab，112 行）做了逐块拆解：

• 四区结构：Header（加油记录）+ FuelCard（油耗渐变卡）+ QuickStats（三列快查）+ RecordList（3 条加油记录）
• 核心交互：无点击（纯展示），油耗卡 34 号数值 + 48 号图标
• 主题色：#FF6B35 活力橙 → #FFA078 浅橙渐变，浅橙软底图标
• 数据闭环：首页 7.2/1035/1020 → 分析页 7.2/8月1035/半年4668 → 我的页 68 次，四页同源

首页是加油记录的"油耗总览"——先看油耗（7.2 L/100km）、再看本月账（1035 元/1020km/0.72 元）、最后看记录（3 次加油明细），一屏完成"车费不费油、油钱花多少"的完整认知。

十一、扩展思考：从加油记账到车辆健康

首页的加油数据可以演进成"车辆健康"体系：第一是油耗异常预警——当前平均油耗 7.2 是静态值，演进方向是"油耗趋势监控"（本月油耗 vs 上月对比，油耗突然升高 10% 以上预警"可能胎压不足/积碳/路况变化"），让油耗从记录变为健康指标；第二是保养里程联动——首页的里程数据（12580 km）演进方向是与保养周期联动（上次保养里程 + 5000 公里 = 下次保养里程，里程达到自动提醒），加油记录驱动保养计划，我的页的"保养提醒"菜单正是此功能入口；第三是加油站点记录——演进方向是记录"在哪家加油站加的油"（中石化/中石油/民营），统计各站点油价对比（哪家便宜），帮助用户选油站；第四是油费预算——首页的月度油费（1035 元）演进方向是设油费预算（如每月 800 元），超预算预警（"本月油费已达 1035 元，超预算 235 元"），把记账变成控费。这四个方向都从首页已有的油耗、里程、油费长出来，让"记录加油"变成"管理车辆"。

十二、从设计稿到代码的映射

把首页设计稿翻译成代码，有几组典型的映射：第一，"油耗大数字"映射为"34 号加粗白字"——设计稿里油耗卡最大的数字 7.2，代码里用最大字号加粗实现，右侧配 48 号加油站图标；第二，"三列快查"映射为"三个等权重白卡"——设计稿的油费/里程/成本三列，代码里用三个等权重列容器各放数值与标签，数值分别用橙/浅橙/绿色；第三，"图标块"映射为"浅橙圆角容器"——设计稿的加油记录图标块，代码里用四十六乘四十六浅橙底加十圆角容器内嵌加油站图标；第四，"油量里程主行"映射为"字符串拼接"——设计稿的"45.2 L · 12580 km"主行，代码里用油量与里程拼接为一行深色文字。这四组映射说明：设计稿的每个视觉差异（字号、颜色、图标、拼接）在代码里都有对应的属性差异，好的还原度来自"设计参数到代码逻辑"的完整对应。

十三、常见问题 FAQ

问：平均油耗为什么用 34 号而金额用 18 号？答：因为油耗是首页的"第一指标"——用户打开应用最关心"车百公里耗几升油"（车况问题），而油费/里程/成本是"第二层快查"（月度账目）。字号差（34 vs 18）编码了信息优先级：油耗是主视角、三列是补充数据，与系列首页"主卡大字 + 副统计小字"的层级一致。

问：首页的里程 12580 km 是什么含义？答：12580 km 是"最近一次加油时仪表盘的里程读数"（08-12 加油时车辆累计行驶 12580 公里）——不是本月里程（本月 1020km 是月度增量），而是车辆总里程的当前值。三个里程的关系：总里程（12580）> 本月里程（1020km）> 记录间里程差（520km 等），不同口径分层。

问：每公里成本 ¥0.72 是固定值吗？答：演示数据写死 0.72 元/km，产品化后由"累计油费 ÷ 累计里程"动态计算（28k ÷ 38k ≈ 0.74），也会随油价与油耗变化——油价涨、油耗高则每公里成本上升，成本是"油费 ÷ 距离"的综合指标，比单看油耗或油费更能反映"跑一公里花多少钱"。

十四、补充要点：首页三个细节再思考

第一，关于油耗卡的信息层次。7.2（34 号）+ "平均油耗 L/100km"（12 号）+ ⛽（48 号）——数字最大、单位次之、图标装饰，三层信息各司其职：数字给结论、单位给定义、图标给场景，用户一眼看到"7.2"再读"每百公里多少升"，信息获取顺序自然。第二，关于三列快查的色彩语义。油费橙（主题色）、里程浅橙（强调色）、成本绿（成功色）——三个数值三种颜色：油费是"本页主角"用主题橙、里程是"辅助数据"用浅橙、每公里成本 0.72 元用绿色暗示"不算贵"（心理引导），颜色不仅是装饰更是语义。第三，关于里程的单调递增。三次记录里程 11560 → 12080 → 12580 严格递增（车越开越远），列表按时间倒序展示（最近的 12580 在最上）——里程与日期的双重排序让记录符合"时间流"直觉，若里程乱序（新记录里程反而小）则数据异常，产品化需校验。

十五、最后总结

首页作为加油记录的第一屏，承担着"油耗总览"的职责——用橙色渐变油耗卡交代平均油耗（7.2 L/100km），用三列快查交代本月账（1035 元/1020km/0.72 元），用加油记录列表交代最近 3 次加油（45.2 L 342 元等）。整页的视觉语言围绕"指标"展开：油耗 34 号大字是主焦点、三列彩色数值是快查、加油记录是明细，三层表达让用户既看到"车费不费油"也看到"油钱花多少"。从演示到产品，这个骨架预留了完整升级空间：油耗可以动态计算（加满法）、每公里成本可以动态聚合、列表可以按时间排序、里程可以驱动保养提醒。加油记录的本质不是记账，而是"看清车辆每一次加油背后的油耗与成本"，首页就是这层认知的第一站。

十六、补充要点：油耗卡与快查统计的细节再思考

第一，关于油耗卡的横向布局。油耗卡用行布局（左数值右图标）而非首页常见的列布局（标签上数值下）——左侧 7.2 油耗信息、右侧 ⛽ 大图标装饰，横向的"数字 + 图标"让卡片右侧不空（若列布局右侧无元素会显得不对称），⛽ 图标既点题又平衡布局，这是"主卡 + 装饰图标"的布局技巧。第二，关于三列快查的信息节奏。本月油费（¥1035 橙）→ 本月里程（1020km 浅橙）→ 每公里成本（¥0.72 绿）——"花多少 → 跑多远 → 单位成本"的信息递进，从总量到平均，用户顺着三列理解"油费为什么是 1035"（因为跑了 1020 公里，每公里 0.72 元），三列是"一次读懂油费构成"的快查。第三，关于记录列表的信息密度。每条记录"油量·里程 + 日期 + 金额"三要素（图标 + 主行 + 副行 + 金额）——信息完整但克制：没有多余的地名、备注，因为加油记录的核心就是"加了多少、花了多少、当时多少公里"，这比停车记录（地点 + 时长）更纯粹，数据维度与场景匹配。这三个细节共同保证首页"主次分明、快查高效、记录精准"。