鸿蒙开发-车轮家的补给记录：加油管理与检查清单车轮家的补给记录：加油管理与检查清单写在前面大家好，我是一名写了十多年

车轮家的补给记录：加油管理与检查清单

如果你是房车旅行爱好者，推荐去鸿蒙应用市场搜一下**「车轮家」**，下载体验体验。记录加油数据、管理出发检查清单、分析油费统计，一套走下来对房车旅行的成本把控会更清晰。体验完再回来看这篇文章，你会更清楚补给记录和检查清单背后是怎么实现的。

写在前面

大家好，我是一名写了十多年Web前端的老兵。从jQuery时代一路走到React/Vue，CSS3动画、requestAnimationFrame、Web Animation API这些都算是看家本领。去年开始转战鸿蒙生态，用ArkTS开发App，这一路踩了不少坑，也积累了不少心得。

很多人觉得"前端转鸿蒙"应该很容易——都是写UI嘛，组件化、状态管理、生命周期，概念都差不多。但真正上手之后你会发现，相似的地方让你觉得亲切，不同的地方让你抓狂。

比如：

数据存储：Web的localStorage到了ArkTS变成了@ohos.data.preferences。
勾选交互：Web的<input type="checkbox">变成了鸿蒙的Checkbox组件。
状态管理：React的useState变成了@State。

接下来这篇文章，我会用"车轮家"的实际开发经历，带你看看加油记录、出发检查清单、油费统计的实现。

这篇文章聊什么

车轮家的补给记录功能，核心要解决三个问题：

加油记录：记录每次加油的数据
出发检查清单：出发前的检查项目
油费统计：分析油费支出

第一步：加油记录

interface FuelRecord {
  id: string;
  date: string;
  location: string;
  liters: number;       // 加油量（升）
  pricePerLiter: number; // 单价
  totalCost: number;     // 总费用
  mileage: number;       // 当前里程
  fuelType: string;      // 油品类型
  notes: string;
}

const FUEL_TYPES = [
  { id: '92', name: '92号汽油' },
  { id: '95', name: '95号汽油' },
  { id: '98', name: '98号汽油' },
  { id: 'diesel', name: '柴油' }
];

第二步：加油记录页面

@Entry
@Component
struct FuelRecordPage {
  @State records: FuelRecord[] = []
  @State showAddForm: boolean = false

  get totalCost(): number {
    return this.records.reduce((sum, r) => sum + r.totalCost, 0);
  }

  get totalLiters(): number {
    return this.records.reduce((sum, r) => sum + r.liters, 0);
  }

  get avgPrice(): number {
    if (this.totalLiters === 0) return 0;
    return this.totalCost / this.totalLiters;
  }

  build() {
    Column() {
      // 统计概览
      Row() {
        this.buildStatCard('总费用', `¥${this.totalCost.toFixed(0)}`, '#F59E0B')
        this.buildStatCard('总加油量', `${this.totalLiters.toFixed(1)}L`, '#3B82F6')
        this.buildStatCard('平均单价', `¥${this.avgPrice.toFixed(2)}/L`, '#10B981')
      }
      .width('100%')
      .margin({ bottom: 16 })

      // 加油记录列表
      List({ space: 8 }) {
        ForEach(this.records, (record: FuelRecord) => {
          ListItem() {
            Row() {
              Column() {
                Text(record.date)
                  .fontSize(14)
                  .fontWeight(FontWeight.Medium)
                Text(record.location)
                  .fontSize(12)
                  .fontColor('#9CA3AF')
              }
              .layoutWeight(1)

              Column() {
                Text(`${record.liters}L`)
                  .fontSize(14)
                  .fontWeight(FontWeight.Bold)
                Text(`¥${record.totalCost}`)
                  .fontSize(14)
                  .fontColor('#F59E0B')
              }
            }
            .width('100%')
            .padding(12)
            .backgroundColor('#1F2937')
            .borderRadius(8)
          }
        })
      }
      .layoutWeight(1)

      Button('记录加油')
        .onClick(() => { this.showAddForm = true })
        .width('100%')
        .backgroundColor('#F59E0B')
    }
    .width('100%')
    .height('100%')
    .padding(16)
    .backgroundColor('#111827')
  }

  @Builder
  buildStatCard(label: string, value: string, color: string) {
    Column() {
      Text(value)
        .fontSize(16)
        .fontWeight(FontWeight.Bold)
        .fontColor(color)
      Text(label)
        .fontSize(11)
        .fontColor('#9CA3AF')
    }
    .layoutWeight(1)
    .padding(8)
    .backgroundColor('#1F2937')
    .borderRadius(8)
    .alignItems(HorizontalAlign.Center)
  }
}

第三步：出发检查清单

const DEPARTURE_CHECKLIST = [
  { id: 'water_tank', name: '水箱已满', essential: true },
  { id: 'battery', name: '电池已充满', essential: true },
  { id: 'gas', name: '燃气充足', essential: true },
  { id: 'tires', name: '轮胎检查', essential: true },
  { id: 'brakes', name: '刹车检查', essential: true },
  { id: 'lights', name: '灯光检查', essential: true },
  { id: 'mirrors', name: '后视镜调整', essential: false },
  { id: 'windows', name: '门窗关闭', essential: false },
  { id: 'locks', name: '储物柜锁好', essential: false },
  { id: 'steps', name: '踏板收起', essential: false },
  { id: 'antenna', name: '天线收起', essential: false },
  { id: 'propane', name: '丙烷阀门关闭', essential: false }
];

总结

这篇文章围绕"车轮家"的补给记录功能，讲解了三个核心主题：

加油记录：加油数据的CRUD操作和统计分析
出发检查清单：勾选式检查项目管理
油费统计：总费用、总加油量、平均单价的计算

加油记录的核心是统计计算——总费用、总加油量、平均单价这些指标帮助用户了解油耗情况。

如果你是房车旅行爱好者，希望这篇文章能帮你理解车轮家背后的管理逻辑。去鸿蒙应用市场下载体验一下吧，有问题欢迎交流。