ArkTS 严格模式：加油录入页的燃油胶囊表单与加满油箱开关

ArkTS 严格模式加油录入页的燃油胶囊表单与加满油箱开关App 57「加油记录」加油页Func1Tab主题色#FF6B35活力橙。本页是加油数据的录入页——白色单行 Header记录加油20 号加粗燃油类型卡燃油类型标题 4 等分胶囊92# / 95# / 98# / 0#柴油默认选中 95#三字段加油表单加油量L· 单价元/L双列 Number 输入 当前里程km全宽输入加满油箱开关卡加满油箱 加满时勾选可精确计算油耗副文案 橙色 Switch 开关默认开启橙色全宽保存记录按钮加油量非空弹记录已保存空则弹请填写加油量。本篇基于57-fuel-log/entry/src/main/ets/pages/Func1Tab.ets共 103 行逐段拆解附 4 张实机截图。一、整体结构四区Header 类型 表单 开关布局加油页是油品选择 数据录入 油耗开关的组合布局——4 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 16 }) { this.TypeCard() this.FormCard() this.FullCard() Button(保存记录).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.liters.length 0 ? 记录已保存 : 请填写加油量 }); }) } .width(100%) .padding({ left: D.pad, right: D.pad, top: 16, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块结构TypeCard— 燃油类型 4 等分胶囊92#/95#/98#/0#柴油FormCard— 三字段加油表单油量/单价/里程FullCard— 加满油箱开关卡精确油耗保存记录— 橙色全宽 CTA 按钮油量校验加油页是录入页——先选油品92/95/98/柴油再填数据油量/单价/里程勾选加满开关最后保存。油品 数据 加满三卡分区明确上卡选加什么油、中卡填加了多少、下卡决定油耗准不准。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header() { Row() { Text(记录加油).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }功能页 Header 标准范式20 号、safeTop 56固定高、文字贴底与分析页、我的页同款。记录加油是动作型标题动词短语与系列录入页App 52 上传票据、App 56 添加记录一致。三、TypeCard燃油类型四等分胶囊TypeCard() { Column({ space: 10 }) { Text(燃油类型).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row({ space: 10 }) { ForEach(this.types, (t: string, idx: number) { Text(t).fontSize(13) .fontColor(this.activeType idx ? #FFFFFF : C.textSub) .textAlign(TextAlign.Center).layoutWeight(1).padding({ top: 10, bottom: 10 }) .backgroundColor(this.activeType idx ? C.primary : C.cardSoft).borderRadius(D.rSm) .onClick(() { this.activeType idx; }) }, (t: string) t) }.width(100%) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解4 等分胶囊92# / 95# / 98# / 0#柴油——layoutWeight(1)四等分 textAlign(TextAlign.Center)居中一行排开圆角 10。默认选中 95#activeType 1第二个选项——95 号汽油是国内家用车最常用的标号92 是经济标号、98 是高性能标号、柴油是特殊车辆默认选中 95 覆盖多数用户与 App 53 保修期限默认 2 年的覆盖多数逻辑一致。选中态选中橙底白字C.primary 白字、未选灰底灰字cardSofttextSub——系列标准胶囊选中态公式。油品语义92#/95#/98# 是汽油标号抗爆性递增95 最常见、0#柴油是柴油标号卡车/柴油轿车——覆盖汽油 柴油两类燃油不同车辆加不同油品。四、FormCard三字段加油表单FormCard() { Column({ space: 14 }) { Row({ space: 12 }) { Column({ space: 6 }) { Text(加油量L).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 0.00 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.liters v; }) }.layoutWeight(1) Column({ space: 6 }) { Text(单价元/L).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 7.58 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.price v; }) }.layoutWeight(1) }.width(100%) Column({ space: 6 }) { Text(当前里程km).fontSize(13).fontColor(C.textSub).width(100%) TextInput({ placeholder: 12580 }).type(InputType.Number) .backgroundColor(C.cardSoft).borderRadius(D.rSm).height(44) .onChange((v: string) { this.mileage v; }) } } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }三字段表单加油量L双列左13 号灰标签 TextInput({ placeholder: 0.00 }).type(InputType.Number)——油量升是保存校验的锚点字段没有油量的加油记录无意义Number 键盘占位符 0.00 暗示两位小数45.20。单价元/L双列右TextInput({ placeholder: 7.58 })——油品单价元每升95# 约 7.58 元与油量在同一行layoutWeight(1)双列并排金额 油量 × 单价产品化自动计算。当前里程km全宽TextInput({ placeholder: 12580 })——仪表盘当前里程与首页记录 12580 km 一致里程差是油耗计算的分母两次加满的里程差 行驶里程。三字段关系油量加了多少 单价每升多少 里程当时仪表读数——一次加油的完整数据金额 油量 × 单价、油耗 油量 ÷ 里程差 × 100录入即驱动首页与分析的指标计算。五、FullCard加满油箱开关卡FullCard() { Row() { Column({ space: 2 }) { Text(加满油箱).fontSize(14).fontColor(C.text) Text(加满时勾选可精确计算油耗).fontSize(11).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Toggle({ type: ToggleType.Switch, isOn: this.full }) .selectedColor(C.primary) .onChange((v: boolean) { this.full v; }) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解加满开关卡左侧加满油箱14 号 加满时勾选可精确计算油耗11 号淡灰副文案右侧Toggle({ type: ToggleType.Switch, isOn: this.full })——开关卡是油耗计算方式的配置。选中色主橙.selectedColor(C.primary)——开关开启时轨道变#FF6B35活力橙。默认开启full true默认勾选加满——油耗计算的行业标准是加满到加满两次加满之间的油量 ÷ 里程差 精确油耗默认开启引导用户采用标准方法。本页独有设计加满开关是油耗计算的关键前提——非加满记录只加了半箱无法准确计算油耗油量不能对应当前里程差开关让用户明确这次是不是加满是系列中录入数据质量开关的独特设计其他录入页没有类似的数据质量开关。六、保存按钮状态校验的交互闭环Button(保存记录).fontSize(15).fontColor(#FFFFFF).backgroundColor(C.primary) .width(100%).height(48).borderRadius(D.rMd) .onClick(() { promptAction.showToast({ message: this.liters.length 0 ? 记录已保存 : 请填写加油量 }); })技术拆解全宽橙色 CTAwidth(100%).height(48)backgroundColor(C.primary)——主色全宽按钮录入页标准 CTA。三元校验this.liters.length 0 ? 记录已保存 : 请填写加油量——以加油量为校验锚点油量是加油记录的核心字段没有油量的记录没有意义油量非空 → 保存成功为空 → 提示请填写加油量。七、跨页数据自洽加油录入的全局闭环加油页与首页、分析、我的三页形成闭环加油油量 里程↔ 首页45.2 L · 12580 km——录入的油量与里程出现在首页加油记录45.2 L 12580 km录入即展示。加油单价 油量↔ 首页¥342金额——金额 油量 × 单价45.2 × 7.58 ≈ 342 元录入参数 → 金额自动计算产品化后。加油加满开关↔ 首页平均油耗 7.2——加满记录才能精确算油耗两次加满之间首页/分析的油耗 7.2 依赖加满记录的质量开关决定油耗精度。加油当前里程 12580↔ 首页记录里程 12580、分析页趋势——里程递增11560 → 12580驱动首页列表与分析趋势里程是油耗与里程统计的公共数据。加油保存↔ 我的页68 次累计——每保存一次加油次数 1产品化后录入量与总量同步。八、系列横向对比录入页的数据质量开关系列中录入型页面的数据设计对比App 57 加油页加满油箱开关数据质量——精度开关加满才精确算油耗。App 56 记录页常用地点快捷胶囊——快捷回填点一下填好。App 55 添加页提前提醒三档胶囊——规则配置何时提醒。App 53 商品页保修期限等分胶囊——参数选择多久保修。57 的差异化在于**加满开关**——这是系列中唯一的数据质量开关其他录入页的开关/胶囊是功能配置提醒/续费而加满开关是数据精度声明这次记录能不能算油耗。副文案加满时勾选可精确计算油耗直接说明开关的业务价值勾选 数据可信 油耗精确这是录入数据影响分析结果的应用非加满记录会污染油耗统计体现加油记录应用的数据严谨性。九、开发者避坑加油录入的四个细节从 Func1Tab 的实现提炼四个易踩坑点金额自动计算当前油量/单价分字段录入但没有自动算金额——产品化应金额 油量 × 单价实时预览或保存时自动计算避免用户手算、也避免首页金额与录入参数对不上。油耗计算的条件油耗需要两次加满之间的记录——产品化保存时若full false非加满应标记此记录不计入油耗或提示首页/分析的油耗只由加满记录计算避免非加满记录油量对不上里程差污染油耗数据。里程单调校验录入里程应大于上次记录里程——产品化校验新里程 历史最大里程否则里程差为负、油耗计算错误并提示用户确认里程是否录错。油品与单价联动95# 单价约 7.58、98# 更贵——产品化可按油品预填参考单价选 98# 自动填高价、选 92# 自动填低价用户确认或修改减少录入步骤。十、常见问题 FAQ问为什么默认选中 95# 汽油答因为 95 号是国内家用车最常用的汽油标号——多数轿车、SUV 的推荐油品92 是经济标号适合低压缩比发动机、98 是高性能标号适合豪华车/性能车、柴油是特殊车辆默认 95 覆盖大多数用户少数用户改选即可符合默认值覆盖多数的设计原则。问加满油箱开关为什么默认开启答因为加满到加满是油耗计算的行业标准方法——两次都加满中间的油量 ÷ 里程差 精确油耗非加满记录只加 100 元、加半箱无法对应准确的油量与里程差。默认开启引导用户采用标准记录法保证首页油耗 7.2 等数据真实可信。问加油量、单价、里程三个字段都要填吗答当前演示只校验加油量油量是核心字段必填单价与里程可空产品化后建议都填——金额 油量 × 单价、油耗 油量 ÷ 里程差缺单价则金额无法计算、缺里程则油耗无法计算三个字段是一次完整加油记录的必要数据。十一、验收与总结本篇对 57-fuel-log 加油页Func1Tab103 行做了逐块拆解四区结构Header记录加油 TypeCard燃油类型 4 胶囊 FormCard三字段表单 FullCard加满开关 保存按钮核心交互油品胶囊单选默认 95#、加满油箱开关数据质量、保存按钮油量校验主题色#FF6B35活力橙——胶囊选中态、加满开关、保存按钮三处主色数据闭环油量×单价 金额 → 首页列表加满记录 → 油耗 7.2里程递增 → 分析趋势加油页是加油记录的录入口——选油品、填三字段、勾加满、校验保存一页完成加油数据的录入。十一、扩展思考从手工记录到智能加油加油页的演进方向是智能加油第一是油价自动获取——当前单价靠手输7.58 元/L演进方向是接入油价数据库按地区/油品自动填充当日油价用户只确认不改减少录入第二是加油量自动计算——部分场景按金额加油加 200 元而非加 30 升演进方向是支持按金额加油模式输入金额自动算油量 金额 ÷ 单价加油页的单价字段是换算基础第三是加油记录 OCR——加油站小票/支付截图拍照自动识别油品/油量/单价/金额/日期自动填入加油页的三字段是 OCR 的填充分区第四是优惠油站推荐——记录在哪加的油、油价多少演进方向是聚合数据推荐附近油价最低的油站同区油站比价加油页的单价记录是比价数据源。这四个方向都从加油页已有的四卡长出来让记一笔变成智能管家。十二、从设计稿到代码的映射把加油页设计稿翻译成代码有几组典型映射第一燃油类型映射为四个等权重胶囊——设计稿的 92 到 98 到柴油四选项代码里用四个等权重容器横向排列选中态橙色底白字、默认选中第二项95 号第二双列输入映射为行内两个等权列——设计稿的加油量与单价并排代码里用一行内两个等权重列各放标签与数字输入组件第三里程全宽输入映射为单列输入组件——设计稿的当前里程整行输入框代码里用全宽列放标签与数字输入第四加满开关映射为一行文案加开关组件——设计稿的加满油箱开关行代码里用左文案右开关组件选中色设为主橙色。这四组映射展示了加油录入页的完整翻译其中数据质量开关加满是本页区别于其他录入页的要点。十三、常见问题 FAQ问92#、95#、98# 汽油有什么区别答三个标号代表汽油的抗爆性辛烷值——92 号最低适合压缩比低的发动机经济省油、95 号居中家用车主流推荐、98 号最高适合高性能/豪华车。加错标号的影响低标车加高标费钱不必要、高标车加低标可能爆震动力下降按车辆说明书推荐标号加油是正确做法加油页默认 95 覆盖多数家用车。问加满油箱开关的精确计算油耗具体指什么答油耗的精确算法是加满到加满——这次加满记录油量 A上次加满记录的里程 M1、这次里程 M2油耗 A ÷ (M2 - M1) × 100。只有两次都加满油量才等于两次之间实际消耗的量如果这次没加满只加 100 元油量不等于消耗量算出的油耗不准。所以加满开关标记这条记录可用于油耗计算。问保存记录时只校验加油量单价和里程可以不填吗答当前演示只校验加油量油量是核心字段产品化后建议三个字段都必填——因为首页列表展示油量 · 里程缺里程则显示不全、金额 油量 × 单价缺单价无法算金额、油耗 油量 ÷ 里程差缺里程无法算油耗三个字段是一次完整加油记录的必要组成缺任一都会影响下游数据。十四、补充要点加油页三个细节再思考第一关于油品胶囊的默认值。默认选中 95# 而非第一项 92#——默认值不是数组第一个而是最常用的一项95 是家用车主流这体现了默认值覆盖多数用户的原则如果默认 92#开 95 的用户每次都要改选默认 95#开 92 的用户少数改选一次即可默认值应选众数而非首项。第二关于加满开关的副文案。副文案加满时勾选可精确计算油耗不是废话——它解释了为什么要勾选精确计算油耗用户理解开关的业务价值后才愿意配合如果只说加满油箱用户不知道为什么勾带解释的开关配置是教育用户的设计。第三关于三字段的录入顺序。油量/单价并排在前、里程在后——按加油时的自然记录顺序先看加了多少、再记当前里程且油量与单价是金额相关成组排列一行内里程独立一行字段分组符合录入逻辑。十五、最后总结加油页是加油记录的录入口。它用燃油类型胶囊解决加什么油92/95/98/柴油用三字段表单解决加了多少油量/单价/里程用加满开关解决数据准不准精确油耗用带校验的保存按钮保证记录有效油量必填。整页交互围绕录入效率与数据质量展开等分胶囊默认 95、金额自动计算产品化、加满开关声明精度、单一校验降低门槛。从演示到产品加油页的进化路线清晰油价自动获取、按金额加油、小票 OCR、优惠油站推荐。十六、补充要点表单与开关的细节再思考第一关于三字段的数值精度。加油量占位符 0.00两位小数加油量可能 45.20 升、单价占位符 7.58两位小数油价精确到分、里程占位符 12580整数里程表整数公里——三个字段的占位符精度对应真实场景油量和单价是小数级升和分、里程是整数级公里占位符示范了每个字段的格式降低输入错误。第二关于加满开关的默认值语义。默认开启full true不只是多数情况加满——它表达产品的数据策略默认按精确法记录加满 → 油耗可算若用户偶尔不加满可以关掉开关记录仍保存只是油耗不精确默认值引导高质量数据比默认关闭用户忘了勾、数据全不精确更优。第三关于保存按钮与开关的配合。保存校验只看加油量必填加满开关不影响保存关了也能保存——必填校验管核心、开关管数据质量的分层加油量缺了记录无意义必填、加满与否不影响记录本身只是油耗精度两层校验逻辑分离符合核心字段必填 质量选项可选的录入设计。