鸿蒙 ArkUI 实战停车记录首页的费用汇总卡与免费/收费双态列表App 56「停车缴费记录」首页HomeTab主题色#2D3436深灰黑charcoal4 个 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 订阅固定扣款本页是出行费用管理——停车费是零散的出行支出记录的核心是地点 时长 费用三元组。项目源码开源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 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 地点名万达广场停车场——产品化后跳该次停车的详情/编辑页。keyr.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 证件照深灰#2D3436Banner 规格网格——工具选择式首页同款深灰主题。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 首页HomeTab103 行做了逐块拆解三区结构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 小时和四张停车卡用户看清了这个月每一次出行停车的成本这是停车缴费记录应用价值的第一落点。