鸿蒙 ArkUI 实战：停车记录首页的费用汇总卡与免费/收费双态列表
鸿蒙 ArkUI 实战：停车记录首页的费用汇总卡与免费/收费双态列表
App 56「停车缴费记录」首页（HomeTab），主题色
#2D3436深灰黑（charcoal），4 个 Tab 分别为首页（🅿️）、记录（📝）、费用（💰）、我的（👤）。首页采用"Header + 汇总卡 + 列表"三区布局——白色单行 Header（"停车记录"22 号加粗） + 深灰渐变费用汇总卡（"本月停车费（元）" + 32 号加粗 286.00 + 停车次数 18 次 / 累计时长 56 小时两列） + SectionTitle（最近停车）+ 4 条停车记录列表（🅿️ 万达广场停车场 2小时15分·今天 14:30 ¥12 / 🏢 公司地下车库 9小时·昨天 09:00 ¥20 / 🏥 市人民医院 1小时40分·8月12日 ¥8 / 🛒 超市免费停车 45分钟·8月11日 免费，每条含 48×48 主色软底图标 + 地点 + 时长·日期 + 收费/免费金额）。本篇基于56-parking-record/entry/src/main/ets/pages/HomeTab.ets（共 103 行）逐段拆解，附 4 张实机截图。
一、整体结构：三区"Header + 汇总卡 + 列表"布局
首页是"品牌头部 + 费用汇总 + 停车记录"的三区布局——3 个 @Builder 块：
build() {
Column() {
this.Header()
Scroll() {
Column({ space: 14 }) {
this.BalanceCard()
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)
}
3 块结构：
- Header — 单行品牌头（"停车记录"），白底固定
- BalanceCard — 深灰渐变费用汇总卡（本月总额 + 两列统计）
- RecordList — "最近停车" + 4 条停车记录卡片列表
首页是"停车总览页"——先亮出本月停车费（286.00 元）、停车次数（18 次）、累计时长（56 小时）三大核心数据，再列出最近 4 次停车记录（万达/公司/医院/超市），让用户一眼掌握"这个月停车花了多少、最近停在哪"。相比 App 52 票据（财务凭证）、App 54 订阅（固定扣款），本页是"出行费用管理"——停车费是零散的出行支出，记录的核心是"地点 + 时长 + 费用"三元组。
二、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 55 续费提醒）同款单行标题范式。
三、BalanceCard：深灰渐变费用汇总卡
BalanceCard() {
Column({ space: 16 }) {
Column({ space: 6 }) {
Text('本月停车费（元）').fontSize(13).fontColor('#FFFFFF').opacity(0.9)
Text('286.00').fontSize(32).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
}.alignItems(HorizontalAlign.Start).width('100%')
Row() {
Column({ space: 4 }) {
Text('停车次数').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
Text('18 次').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Column({ space: 4 }) {
Text('累计时长').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
Text('56 小时').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
}.width('100%')
}
.width('100%').padding(20).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]] })从#2D3436深灰黑渐变到#636E72灰——系列第二次使用黑白/深色系（App 51 证件照同为#2D3436），深灰传达"车辆/工业/正式"的气质（停车场、汽车场景的沉稳感），与五彩斑斓的系列形成反差。 - 主金额 32 号加粗：
286.00用 32 号 Bold 白字——全卡最大字号（信息层级第一），本月停车费是首页最核心的数字（用户打开 App 第一眼要看"这个月停车花了多少"）。 - 两列副统计：
停车次数 18 次与累计时长 56 小时用layoutWeight(1)均分——一列是次数（18）、一列是时长（56 小时），"次"与"时"两个维度（停了多回、停了多久），比金额更具体地描述停车行为。 - 数据自洽：286.00 元 = 费用页"8月停车总费用 ¥286"（四舍五入）；18 次 = 本月停车次数；56 小时 = 本月累计时长——三组数字跨页一致（首页给当月结论、费用页给月度明细）。
- 白字可读性：深灰底白字 + 90% 透明度小标签——深底白字是最清晰的组合，13 号标签 0.9 透明度弱化、16 号数值 1.0 强调，"标签轻、数值重"的层级。
四、RecordList：免费/收费双态停车列表
RecordList() {
Column({ space: 10 }) {
ForEach(this.records, (r: Record) => {
Row({ space: 12 }) {
Row() { Text(r.emoji).fontSize(24) }
.width(48).height(48).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
Column({ space: 3 }) {
Text(r.place).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text)
Text(r.duration + ' · ' + r.date).fontSize(12).fontColor(C.textDim)
}.alignItems(HorizontalAlign.Start).layoutWeight(1)
Text(r.fee > 0 ? '¥' + r.fee : '免费').fontSize(15).fontWeight(FontWeight.Bold)
.fontColor(r.fee > 0 ? C.text : C.ok)
}
.width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
.onClick(() => { promptAction.showToast({ message: r.place }); })
}, (r: Record) => r.id.toString())
}.width('100%')
}
4 条停车记录数据（21-26 行）：
| 地点 | 时长 | 时间 | 费用 |
|---|---|---|---|
| 🅿️ 万达广场停车场 | 2小时15分 | 今天 14:30 | ¥12 |
| 🏢 公司地下车库 | 9小时 | 昨天 09:00 | ¥20 |
| 🏥 市人民医院 | 1小时40分 | 8月12日 | ¥8 |
| 🛒 超市免费停车 | 45分钟 | 8月11日 | 免费（绿） |
卡片细节：
- 48×48 主色软底图标块：
backgroundColor(C.primarySoft)（#E9ECEE浅灰）+ 24 号 emoji——浅灰圆角底（深灰主题的浅色变体），每个地点一个 emoji（🅿️🏢🏥🛒），停车类型一眼可辨。 - 地点 + 时长日期：14 号 Medium 地点名 + 12 号淡灰"2小时15分 · 今天 14:30"——时长 · 日期拼接（停了多久 + 什么时候），
layoutWeight(1)撑开中间区。 - 免费/收费双态：
r.fee > 0 ? '¥' + r.fee : '免费'——收费显示 ¥12（深灰加粗）、免费显示"免费"（绿色 ok）——免费停车用绿色强调"没花钱"（正面语义），收费用深灰中性色，双态金额让免费记录一眼可辨（系列中少见的"免费标识"设计）。 - 时长差异：2小时15分 / 9小时 / 1小时40分 / 45分钟——覆盖长短时停车（短时购物、全天上班、临时就医），费用与时长正相关（9 小时 20 元最高、45 分钟免费）。
- 整卡点击：点击 Toast 地点名（"万达广场停车场"）——产品化后跳该次停车的详情/编辑页。
- key：
r.id.toString()稳定唯一（1-4）。
五、跨页数据自洽：停车数字的全局闭环
首页数据与记录、费用、我的三页形成完整闭环：
- 首页"286.00 元" ↔ 费用页"¥286 8月停车总费用"——金额完全一致（286.00 vs 286），首页是"本月停车费"、费用页是"8 月停车总费用"，同一笔钱的当月视角。
- 首页"18 次" ↔ 费用页柱状图"8月 ¥286"——首页的停车次数（18 次）与费用页 8 月柱（286 元）对应（当月数据两个维度），费用页柱状图 4-8 月的趋势（220/260/310/245/286）以 8 月 286 元收尾，与首页吻合。
- 首页"万达广场 ¥12" ↔ 费用页"万达广场 8 次 ¥96"——首页的万达单次 12 元是费用页万达 8 次累计 96 元中的一笔（96 ÷ 8 = 12 元/次，均额一致），单笔与累计对账。
- 首页"公司地下车库 ¥20" ↔ 费用页"公司车库 20 次 ¥400"——公司单次 20 元 × 20 次 = 400 元（费用页公司车库金额），单价 × 次数 = 累计完全自洽。
- 首页 4 条记录 ↔ 我的页"156 次"累计——首页是"最近 4 次"、我的页是"累计 156 次"，近期展示 vs 总量统计的时间范围分层。
- 首页"免费"记录 ↔ 费用页地点列表无"超市"——超市免费停车（0 元）不计入费用统计（费用页只有收费地点：公司/万达/医院），免费记录只展示不统计，逻辑自洽。
六、系列横向对比：深灰系工具首页三剑客
把 56 的首页放进系列对比，特点鲜明：
- App 56 停车记录（深灰
#2D3436）：费用汇总 + 免费/收费双态列表——"出行费用"式首页，首屏即本月停车账。 - App 51 证件照（深灰
#2D3436）：Banner + 规格网格——"工具选择"式首页，同款深灰主题。 - App 55 续费提醒（红
#FF6B6B）：扣款预警 + 临期列表——"支出预警"式首页，红色警示。 - App 52 电子票据（蓝
#0066CC）：金额汇总 + 票据列表——"财务管理"式首页。
56 与 51 共用 #2D3436 深灰主题——系列中仅有的两个深色系应用（证件照的专业、停车记录的沉稳）。56 的差异化在于**"免费/收费双态"**：收费显示 ¥12、免费显示绿色"免费"，把"没花钱"的正面信息用绿色单独标识（其他费用类应用只有金额单态），加上"时长 · 日期"的出行信息（其他应用无时长维度），构成停车场景独有的首页形态。
七、开发者避坑：停车列表的四个细节
从 HomeTab 的实现提炼四个易踩坑点：
- 免费判定：
r.fee > 0 ? '¥' + r.fee : '免费'——以 fee 是否大于 0 判定免费（fee = 0 显示"免费"绿字），注意 fee 为 0 与"未填费用"的区分（未填应提示补录而非显示免费），产品化需区分"免费停车"与"费用未知"。 - 金额格式：
Text('¥' + r.fee)直接拼字符串——金额应统一两位小数（12.00 而非 12），与汇总卡的 286.00 格式一致；产品化用toFixed(2)统一。 - 时长与费用的关系：时长"9小时 ¥20"、时长"45分钟 免费"——时长格式不统一（2小时15分 vs 9小时 vs 45分钟），产品化应由入场/出场时间自动计算时长（统一格式），并校验"出场 > 入场"。
- 深色主题的浅色变体：
C.primarySoft（#E9ECEE）是深灰主题的浅底——深色主题的"软底"色要够浅（否则图标块与卡片无区分），本页浅灰底 + 深灰图标对比清晰，产品化保持"深主题 + 浅软底"的配套。
八、常见问题 FAQ
问：汇总卡的 286.00 元与费用页的 286 元是什么关系？答：完全同一笔钱——首页的"本月停车费 286.00 元"就是费用页"8 月停车总费用 ¥286"（四舍五入取整），首页从"月度总览"角度、费用页从"月度趋势"角度展示当月停车支出。产品化后由所有停车记录动态求和（每月汇总），新增记录后两页数字同步更新。
问：为什么免费停车也放在"最近停车"列表里？答：因为免费停车也是"停车行为"的记录——虽然不花钱，但记录了"停了哪、停了多久"，对用户了解自己的停车习惯（常去哪里、停多久）有价值。同时免费记录用绿色"免费"标识，与收费记录（¥12）形成对比，列表不单调也更有信息量。
问：18 次和 56 小时是本月还是累计？答：首页汇总卡的"18 次 / 56 小时"是本月数据（本月停车次数、本月累计时长），我的页的"156 次"才是累计（全部历史停车次数）。首页聚焦"本月"，我的页聚焦"总量"，两个时间口径分层展示。
九、验收与总结
本篇对 56-parking-record 首页（HomeTab，103 行）做了逐块拆解：
- 三区结构：Header（停车记录）+ BalanceCard（深灰渐变汇总）+ RecordList（免费/收费双态列表）
- 核心交互：停车卡片点击 Toast（详情入口）、免费记录绿色标识
- 主题色：
#2D3436深灰黑 →#636E72灰渐变，白字呈现，浅灰软底图标 - 数据闭环：首页 286/18/56 → 费用页 286/8月 → 我的页 156 次，四页同源
首页是停车缴费记录的"出行总览"——先看费用（286 元）、再看次数与时长（18 次/56 小时）、最后看明细（万达 12 元/公司 20 元/医院 8 元/超市免费），一屏完成"停车花了多少"的完整认知。
十、扩展思考：从停车记账到出行账本
首页的停车记录可以演进成"出行账本"：第一是停车费与油费/电费联动——停车记录只有停车费，演进方向是叠加出行成本（停车 + 加油/充电 + 过路费），形成"一次出行的完整成本"，让用户看清"开车到底花多少"；第二是停车位记忆——首页记录的停车场位置（万达广场、公司地下车库）可以演进为"停车位记忆"（记录车位号、拍下位置照片），解决"车停哪了"的找车痛点，停车记录是位置记忆的数据基础；第三是收费规则提醒——不同停车场计费规则不同（万达 5 元/时、公司月卡免费），演进方向是记录每个地点的收费标准并计算"超时预计费用"，让用户停车前就知道大概花多少；第四是月度预算——首页的月度汇总（286 元）可以演进为"停车预算"（每月设 300 元上限），超预算预警（"本月停车费已达 286 元，接近预算"），把记账变成控费。这四个方向都从首页已有的停车记录长出来，让"记录花了多少"变成"管理出行成本"。
十一、从设计稿到代码的映射
把首页设计稿翻译成代码，有几组典型的映射：第一，"深灰渐变汇总卡"映射为"渐变色容器加两级文本"——设计稿顶部的费用汇总卡，代码里用深灰到灰的渐变背景容器内放标签与 32 号金额、两列副统计；第二，"免费/收费双态"映射为"条件判断切换文案与颜色"——设计稿里免费显示绿色"免费"、收费显示深灰金额，代码里用费用大于零的条件判断渲染不同文本与颜色；第三，"图标块"映射为"浅灰圆角容器"——设计稿的停车类型图标块，代码里用四十八乘四十八浅灰底加十圆角容器内嵌表情图标；第四，"时长日期副行"映射为"字符串拼接"——设计稿的"时长 · 日期"副文案，代码里用时长与日期拼接为一行淡灰小字。这四组映射说明：设计稿的每个视觉差异（颜色、文案、图标）在代码里都有对应的条件逻辑与属性差异，好的还原度来自"设计参数到代码逻辑"的完整对应。
十二、常见问题 FAQ
问：首页的"免费"记录用绿色有什么讲究？答：绿色（ok 常量）在系列中表示"正面/正常"——免费停车"没花钱"是正面信息，用绿色标识与收费记录的深灰金额形成对比，用户扫列表一眼就能看到"这笔没花钱"。这与 App 53 的在保绿、App 55 的临期红一样，都是"颜色编码状态"的设计手法。
问：18 次停车、56 小时时长是怎么统计的？答：演示数据写死本月统计（18 次、56 小时），产品化后由当月的停车记录动态统计——本月记录条数（18）与时长求和（56 小时），新增记录后自动更新。56 小时 ÷ 18 次 ≈ 3.1 小时/次，平均每次停 3 小时左右，与列表记录（2小时15分、9小时等）的量级吻合。
问：首页为什么没有"全部"跳转的实际功能？答：当前"全部 >"只是标题右侧的入口标识（无跳转逻辑），产品化后点击跳转到完整停车记录列表（我的页"停车记录"菜单的页面），首页只展示最近 4 条，完整列表在二级页面——"首页轻展示、二级看全量"的信息架构。
十三、补充要点：首页三个细节再思考
第一，关于深灰主题的独特性。系列 56 个应用中只有 App 51 证件照与 App 56 停车记录使用深灰主题（#2D3436）——深灰传达"正式、沉稳、工具感"，与停车场景（车辆、车库的工业气质）契合，也让系列在五彩斑斓中保持两款"深色担当"。第二，关于免费记录的统计排除。免费停车（0 元）在首页列表展示但费用页统计排除（费用页只有收费地点）——"展示所有记录、统计只算费用"的设计，让用户既能看到完整的停车行为，又不会被 0 元数据干扰费用统计。第三，关于时长副行的信息价值。"2小时15分 · 今天 14:30"比单纯"¥12"多一层信息——时长与时间让停车记录有"行为"的质感（不只是花了钱，而是"今天下午停了两个多小时"），这是出行记录类应用区别于纯财务应用的信息厚度。
十四、最后总结
首页作为停车缴费记录的第一屏，承担着"出行总览"的职责——用深灰渐变汇总卡交代本月费用（286 元）、次数（18 次）、时长（56 小时），用免费/收费双态列表交代最近 4 次停车（万达 12 元/公司 20 元/医院 8 元/超市免费），用"全部"入口连接完整列表。整页的视觉语言围绕"记录 + 费用"展开：深灰渐变传达沉稳、免费绿色标识省钱的记录、时长日期副行补充行为信息，三层表达让用户既看到"花了多少"也看到"停了什么"。从演示到产品，这个骨架预留了完整升级空间：费用可以动态汇总、时长可以由时间自动计算、列表可以按时间排序、停车位可以记忆位置。作为系列第 56 号应用，它延续了"骨架统一、亮点各异、数据自洽"的方法论——深灰渐变是视觉签名、免费/收费双态是产品亮点、四页同源是数据保证。停车记录的本质不是记账，而是"看清每一次出行的成本"，首页就是这层认知的第一站。
十五、补充要点：免费/收费双态的细节再思考
免费/收费双态是本页最有特色的设计，有几个细节值得再思考：第一，免费判定的边界——"免费"的条件是费用为零（fee > 0 判断收费），这意味着"免费停车"是一个明确的业务状态（超市免费停车 45 分钟），而非"忘记填费用"——产品化时"费用未知"与"免费"必须区分（未知应提示补录而非显示免费），否则用户会误以为没花钱。第二，绿色免费的语义强度——"免费"用绿色（ok）而非深灰，绿色在中文语境是"好消息"（省钱），用户扫到绿色就知道"这笔没花钱"，比深灰金额更有情感反馈（省钱的高兴感）；但如果列表里免费记录过多，绿色会喧宾夺主，产品化可限制"最近免费记录"的展示数量。第三，双态与深灰主题的协调——收费深灰金额与免费绿色并存，深灰是主色、绿色是强调色，一主一辅不冲突；若所有金额都用彩色（像 App 54 品牌色），免费/收费的对比反而不明显。第四，费用为零时的金额格式——免费不显示"¥0"而是"免费"，避免"¥0"的误导（看起来像没填），用文字替代数字是"0 值友好展示"的标准做法。这四个细节共同保证双态设计既清晰又有情感，是停车记录首页的差异化亮点。
十六、最后补充
首页解析至此完整收尾：从深灰渐变汇总卡到免费/收费双态列表，全部要点均已覆盖。读者可对照源码逐行验证文中引用的代码片段——汇总卡的金额层级、免费判定的条件逻辑、时长日期副行的拼接方式，理解"出行费用管理"首页的设计思路。停车记录的首页是一扇窗：透过 286 元、18 次、56 小时和四张停车卡，用户看清了这个月每一次出行停车的成本，这是停车缴费记录应用价值的第一落点。
作为“人工智能6S店”的官方数字引擎，为AI开发者与企业提供一个覆盖软硬件全栈、一站式门户。
更多推荐
0
0- 0
已为社区贡献388条内容
所有评论(0)