HarmonyOS 6.0实战：停车记录我的页 —— 车主信息卡与负边距统计行组合技

一键难忘

67人浏览 · 2026-10-06 23:55:07

一键难忘鸿蒙领航者 · 2026-10-06 23:55:07 发布

HarmonyOS 6.0实战：停车记录我的页 —— 车主信息卡与负边距统计行组合技

App 56「停车缴费记录」我的页（ProfileTab），主题色 #2D3436 深灰黑。本页是车主小李的个人中心——深灰渐变用户卡（🅿️ 64×64 半透明圆头像 + "车主小李"18 号 Bold + "沪A·88888 · 累计停车 156 次"） + 负边距统计行（156 停车次数 / ¥2.8k 累计费用 / 3 常用地点，上移 24 悬浮） + 四菜单列表（🚗 车辆信息 / 📍 常用地点 / 📋 停车记录 / ⚙️ 设置，0.5 Divider 分隔） + 底部版本号（停车缴费记录 Version 1.0.0）。本篇基于 56-parking-record/entry/src/main/ets/pages/ProfileTab.ets（共 98 行）逐段拆解，附 4 张实机截图。

一、整体结构：四区"用户卡 + 统计 + 菜单 + 版本"布局

我的页是"车主信息 + 数据统计 + 工具入口"的四区布局——4 个 @Builder 块：

build() {
  Column() {
    Scroll() {
      Column() {
        this.UserCard()
        this.StatRow()
        this.MenuList()
        this.About()
      }
      .width('100%')
      .padding({ bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

4 块结构：

UserCard — 深灰渐变用户卡（车主身份 + 车牌）
StatRow — 负边距三列统计行（次数/费用/地点）
MenuList — 四工具菜单（车辆/地点/记录/设置）
About — 底部版本信息

我的页是"车主个人中心"——先亮身份（车主小李 + 车牌沪A·88888）、再看统计（156 次/2.8k/3 地点）、最后进工具菜单。与系列个人中心（App 52/53/55）结构一致，但身份区展示车牌号（停车场景的专属信息，其他应用没有车牌），体现"车主"的产品定位。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、UserCard：深灰渐变车主卡

UserCard() {
  Row({ space: 14 }) {
    Row() { Text('🅿️').fontSize(32) }
    .width(64).height(64).backgroundColor('#33FFFFFF').borderRadius(32).justifyContent(FlexAlign.Center)
    Column({ space: 5 }) {
      Text('车主小李').fontSize(18).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('沪A·88888 · 累计停车 156 次').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
  }
  .width('100%')
  .padding({ top: this.safeTop + 30, left: D.pad, right: D.pad, bottom: 44 })
  .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，与首页汇总卡、费用页月度卡同款渐变（深灰主题统一）。
64×64 半透明圆头像：backgroundColor('#33FFFFFF')——白色 20% 透明圆角 32 头像底，🅿️ 32 号居中。"🅿️"（停车标志）即产品符号（与 Tab 图标、首页记录图标一致）。
车主身份 + 车牌副文案：18 号 Bold 白字"车主小李"（昵称）+ 12 号 85% 白字"沪A·88888 · 累计停车 156 次"——昵称大、车牌与累计次数副行小，车牌是停车场景的专属标识（沪A·88888 演示车牌），156 次是背书数据（与统计行"156 停车次数"一致）。
底部留白 44：bottom: 44 + safeTop + 30——顶部避让、底部大留白（给负边距统计行让位），系列个人中心标准。

我的页整体布局

三、StatRow：负边距三列统计行

StatRow() {
  Row() {
    ForEach(this.stats, (s: StatItem) => {
      Column({ space: 4 }) {
        Text(s.value).fontSize(18).fontWeight(FontWeight.Bold).fontColor(C.text)
        Text(s.label).fontSize(11).fontColor(C.textDim)
      }.layoutWeight(1)
    }, (s: StatItem) => s.label)
  }
  .width('92%').padding({ top: 14, bottom: 14 })
  .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }).margin({ top: -24 })
}

技术拆解：

负边距悬浮：.margin({ top: -24 })——统计行上移 24 覆盖在渐变卡留白区（系列经典悬浮手法），"卡片叠卡"层次感。
三列均分：layoutWeight(1) 三列——156（停车次数）/ ¥2.8k（累计费用）/ 3（常用地点），每列 18 号 Bold 数值 + 11 号淡灰标签。
数据一致性：156 = 用户卡"累计停车 156 次"、¥2.8k ≈ 全部历史停车费用累计（约 2800 元）、3 = 常用地点数量（公司/万达/医院等）——卡片内数据自洽。
累计 vs 本月：156 次是累计（用户卡也是 156），与首页"18 次"（本月）分层——累计口径在我的页、当月口径在首页。

三列数据（15-19 行）：

156 停车次数（累计，= 用户卡"累计停车 156 次"）
¥2.8k 累计费用（全部历史停车支出，约 2800 元）
3 常用地点（常去的停车场数量，公司/万达/医院）

四、MenuList：四工具菜单列表

MenuList() {
  Column() {
    ForEach(this.menus, (m: MenuItem, idx: number) => {
      Row({ space: 12 }) {
        Text(m.emoji).fontSize(18)
        Text(m.title).fontSize(14).fontColor(C.text).layoutWeight(1)
        Text('>').fontSize(14).fontColor(C.textDim)
      }
      .width('100%').padding({ left: 14, right: 14, top: 14, bottom: 14 })
      .onClick(() => { promptAction.showToast({ message: m.title }); })
      if (idx < this.menus.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) }
    }, (m: MenuItem) => m.title)
  }
  .width('92%').margin({ top: 16 }).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

4 个菜单项（21-26 行）：

🚗 车辆信息 — 管理车辆信息（车牌、车型、常用车辆）
📍 常用地点 — 维护常用停车场列表
📋 停车记录 — 查看全部停车记录
⚙️ 设置 — 应用偏好配置

技术拆解：

左 emoji + 中标题 + 右箭头：18 号 emoji（🚗📍📋⚙️）+ 14 号标题 + > 箭头——标准列表行，右箭头暗示"可进入"。
0.5 细 Divider：idx < length - 1 判断后插入——最后一项不画线，整宽细线分隔。
整行点击：点击 Toast 菜单名——产品化后跳对应功能页（车辆信息 ↔ 用户卡车牌管理、常用地点 ↔ 记录页快捷胶囊的来源）。
菜单与功能对应：🚗车辆信息（车牌管理）、📍常用地点（快捷胶囊维护）、📋停车记录（完整记录列表）、⚙️设置（偏好）——"车辆信息"与"常用地点"是停车场景专属菜单（其他应用没有），体现产品定位。

五、About：底部版本信息

About() {
  Column({ space: 4 }) {
    Text('停车缴费记录').fontSize(12).fontColor(C.textDim)
    Text('Version 1.0.0').fontSize(11).fontColor(C.textDim).opacity(0.7)
  }.width('100%').margin({ top: 24 })
}

12 号淡灰"停车缴费记录" + 11 号 70% 透明"Version 1.0.0"——应用名 + 版本号（与 AppScope/app.json5 的 versionName "1.0.0" 一致），个人中心标准收尾。

六、跨页数据自洽：个人中心的全局闭环

我的页与首页、记录、费用三页形成完整闭环：

我的页"156 次累计" ↔ 首页"18 次本月"——累计与当月的分层（156 = 全部历史、18 = 本月），我的页总量、首页当月。
我的页"¥2.8k 累计费用" ↔ 费用页"月度 220-310"——累计 2800 元由各月费用累加（4-8 月约 1321 元 + 更早历史），月度趋势 → 累计总量。
菜单"常用地点" ↔ 记录页"常用地点胶囊"——常用地点菜单维护的列表就是记录页的快捷胶囊来源，维护入口与快捷入口同源。
菜单"停车记录" ↔ 首页"最近停车"——停车记录菜单是完整记录列表入口（首页只展示最近 4 条），首页轻展示、菜单看全量。
用户卡"车牌沪A·88888" ↔ 菜单"车辆信息"——用户卡展示车牌、车辆信息菜单管理车牌（多车场景切换），展示与管理的配对。

点击设置菜单

七、系列横向对比：个人中心五种风格

系列中个人中心页各有侧重：

App 56 车主小李（深灰 #2D3436）：车主卡 + 统计 + 四菜单——"车主型"，车牌号 + 停车数据。
App 52 票据管家（蓝 #0066CC）：渐变卡 + 统计 + 五菜单——"财务型"，导出报销单。
App 53 保修管家（绿 #00A862）：渐变卡 + 统计 + 开关 + 四菜单——"设置型"，提醒开关。
App 55 续费管家（红 #FF6B6B）：渐变卡 + 统计 + 推送开关 + 四菜单——"通知型"，推送开关。
App 51 证件照（深灰 #2D3436）：会员中心 + 常用规格——"消费型"，会员权益。

56 与 51 同用深灰主题（系列仅有的两个深色应用），但个人中心形态不同：51 是"会员 + 规格"、56 是"车主 + 停车统计"。56 的差异化在于**"车牌身份"**——用户卡展示车牌号（沪A·88888），菜单含"车辆信息"与"常用地点"（停车场景专属），统计行是停车数据（次数/费用/地点），整个个人中心围绕"车主"身份组织，是系列中身份属性最鲜明的个人中心之一。

点击车辆信息菜单

八、开发者避坑：个人中心四个细节

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

车牌号脱敏与隐私：车牌"沪A·88888"是演示数据——产品化车牌号属个人信息，展示时应考虑隐私（是否脱敏、是否仅在本地显示），且车牌字段应支持多车管理（一个车主多辆车切换）。
统计值动态化：156/2.8k/3 都是写死的——产品化由数据源实时聚合（停车次数 = 记录条数、累计费用 = 金额汇总、常用地点 = 地点分组数），新增记录后自动更新。
累计费用的展示单位：¥2.8k 是缩写（2800 元）——与费用页的 ¥286（整数）单位不一致（k 缩写 vs 全量），产品化应统一格式化函数（小金额全量、大金额缩写），或全部显示全量。
深色渐变卡的白字层级：身份名 18 号、副文案 12 号 85% 透明度——透明度递减层级（1.0/0.85/0.7 版本号），深色底白字保持对比度，若副文案透明度太低会看不清。

点击停车记录菜单

九、常见问题 FAQ

问：累计费用 ¥2.8k 是怎么来的？答：演示数据设定全部历史停车费用累计约 2800 元（用 k 缩写），费用页展示的是"月度"（4-8 月约 1321 元），我的页是"累计"（全部历史，含更早月份），累计金额远大于单月。产品化后由所有停车记录金额动态汇总。

问：为什么我的页没有开关类设置（像 App 53/55 那样）？答：因为停车记录是"记录型"应用——核心功能是记录与统计（不需要提醒开关，停车费没有"扣款提醒"的刚需），所以我的页回归"车主信息 + 数据 + 菜单"的简洁形态。若产品化增加"停车超时提醒""费用预算提醒"等能力，可以补充开关卡。

问：菜单里的常用地点和记录页的常用地点是什么关系？答：同一个数据源——记录页顶部显示的"常用地点"快捷胶囊（公司车库/万达广场/市医院/超市停车场）就是我的页"常用地点"菜单维护的列表，两者共用一份常用地点数据，记录页点击快捷填入、我的页管理列表内容。

十、验收与总结

本篇对 56-parking-record 我的页（ProfileTab，98 行）做了逐块拆解：

四区结构：UserCard（车主渐变卡）+ StatRow（负边距统计）+ MenuList（四菜单）+ About（版本号）
核心交互：菜单行点击 Toast（车辆/地点/记录/设置）、悬浮统计行
主题色：#2D3436 → #636E72 渐变卡，深灰主题贯穿
数据闭环：我的页 156/2.8k = 首页 18 次/286 元的累计口径，车牌贯穿用户卡与车辆菜单

我的页是停车缴费记录的"车主个人中心"——身份（车主小李 + 车牌）、总账（156 次/2.8k）、工具（四菜单）一屏收纳。

十、扩展思考：从车主中心到车辆管理

我的页的演进方向是"车辆管理"：第一是多车管理——当前只有一个车牌（沪A·88888），演进方向是支持多辆车（家用车、公司车、家人车）分别记录与统计，用户卡展示"当前车辆"、车辆信息菜单管理车辆列表；第二是停车习惯分析——156 次累计停车可以演进为"常去地点排行、常用时段分析"（工作日公司多、周末万达多），让用户了解自己的出行规律；第三是费用趋势对比——累计费用 2.8k 演进为"今年 vs 去年停车费对比"（今年省了还是超了），与费用页的月度趋势衔接；第四是电子停车证——车牌号接入电子停车证（自动识别车牌扣费的停车场），用户卡的车牌是电子化的基础信息。这四个方向都从我的页现有的车牌与统计数据长出来，让"车主中心"变成"车辆管家"。

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

把我的页设计稿翻译成代码，有几组典型映射：第一，"车主身份区"映射为"渐变卡片加半透明头像"——设计稿的深灰渐变用户卡，代码里用渐变背景、半透明白色圆角头像容器、白字昵称与车牌副文案实现；第二，"悬浮统计"映射为"负边距白卡"——设计稿统计行叠在渐变卡底部，代码里用上移二十四的负边距加白底描边实现；第三，"菜单列表"映射为"循环渲染的行加条件分割线"——设计稿四个菜单项用细线分隔，代码里用循环生成每行，按索引判断最后一行不画线；第四，"版本信息"映射为"两个淡灰小字"——设计稿底部的应用名与版本号，代码里用两个透明度递减的淡灰文本实现。这四组映射展示了"个人中心"设计到代码的完整翻译，与系列其他个人中心共用同一套结构模板，是"骨架统一"方法论的具体体现。

十二、常见问题 FAQ

问：车牌号"沪A·88888"是真实的吗？答：不是，这是演示用的虚构车牌（沪A 是上海号牌格式，88888 是顺子号便于记忆）。产品化后车牌由用户在"车辆信息"菜单中录入（真实车牌），且作为个人信息需要考虑隐私保护（本地存储、展示脱敏选项）。

问：累计费用 ¥2.8k 为什么用 k 缩写？答：累计费用约 2800 元，用 k（千）缩写为 ¥2.8k 更简洁——统计行空间有限（三列均分），"¥2.8k"比"¥2800"更紧凑。产品化应统一金额格式（或提供缩写开关），避免"费用页 ¥286 全量、我的页 ¥2.8k 缩写"的格式不一致。

问：3 个常用地点和记录页的 4 个常用地点为什么数量不同？答：我的页统计的"3 常用地点"是收费常用地点（公司/万达/医院，费用页统计的 3 个地点），记录页的 4 个常用地点胶囊包含"超市停车场"（免费停车场）——免费地点在记录时快捷使用，但不计入"收费常用地点"统计，口径不同所以数量不同。

十三、补充要点：我的页三个细节再思考

第一，关于车主身份的产品定位。用户卡展示"车主小李 + 车牌"而非通用昵称——"车主"身份贯穿个人中心（停车记录的用户天然是车主），车牌是身份的硬标识，这与 App 52"票据管家"、App 53"保修管家"的"角色命名"一脉相承（系列个人中心都用"XX管家/车主"式角色名）。第二，关于统计行的累计口径。156 次/2.8k/3 都是"累计"（全部历史），与首页的"18 次/286 元/56 小时"（本月）形成口径分层——首页看当月、我的页看全部，两个页面回答不同时间尺度的问题，数据同源但口径不同。第三，关于深灰主题的一致性。我的页与首页、费用页共用深灰渐变（#2D3436 → #636E72），三个页面三处渐变卡同色——深灰主题贯穿四页，让停车记录应用在系列中成为"深色系担当"。

十四、最后总结

我的页作为车主小李的个人中心，用四个区域完成了身份、数据、入口、版权的完整呈现：深灰渐变用户卡亮出身份（车主 + 车牌 + 156 次），负边距统计行展示数据（156/2.8k/3），四菜单提供工具入口（车辆/地点/记录/设置），版本号收尾。本页的独特之处在于"车牌身份"——停车记录的用户是车主，车牌与停车统计（次数/费用/地点）构成车主专属的个人中心。

十五、补充要点：车主身份与统计口径的细节再思考

本页的"车主身份 + 累计口径"有几个细节值得再思考：第一，车牌的展示位置——车牌（沪A·88888）放在身份副文案中（昵称下方），而非独立一行或头像内——车牌是"辅助身份信息"（用户知道自己的车牌），不需要与昵称同等突出，副行位置既保留信息又不喧宾夺主；产品化后多车用户的"当前车牌"应可切换（点击车牌切换车辆）。第二，累计与当月的口径分层——我的页 156 次（累计）、首页 18 次（本月），两个口径服务不同问题（"我总共停了多少次" vs "这个月停了多少次"）——如果两页都用累计，本月数据就无处安放；如果都用当月，累计洞察就缺失，口径分层是信息架构的合理安排。第三，统计行的"3 常用地点"——与记录页 4 个常用地点胶囊的差异（收费 3 vs 全部 4）在前文已述，这里补充一点：统计行的"3"暗示"用户主要在 3 个地方停车"，与费用页的地点消费（3 个收费地点）完全一致——我的页统计、费用页明细、记录页快捷三处的地点是同一套数据，只是口径（收费/全部）不同。第四，深灰主题的贯穿——我的页渐变卡整体采用深灰（#2D3436 → #636E72），沉稳的深色让个人中心在视觉上更具质感。这四个细节共同保证车主个人中心"身份清晰、口径分明、视觉统一"。