HarmonyOS ArkTS实战：从零实现 —— 保养日志页的圆点竖线时间轴与双列统计卡

HarmonyOS ArkTS实战从零实现 —— 保养日志页的圆点竖线时间轴与双列统计卡App 58「车辆保养提醒」日志页Func2Tab主题色#008080青蓝。本页是保养历史的日志页——白色单行 Header保养日志20 号加粗双列统计卡12 保养次数青 / ¥3860 累计花费浅青SectionTitle保养历史 4 条保养时间轴️ 机油机滤更换 12080 km·2026-07-28 ¥480 / 四轮换位 11000 km·2026-06-15 ¥60 / 常规保养 10000 km·2026-05-02 ¥650 / ❄️ 空调滤芯更换 8500 km·2026-03-20 ¥120左侧 32×32 浅青圆标 竖线连接 项目名 红色金额 里程·日期副行。本篇基于58-car-maintain/entry/src/main/ets/pages/Func2Tab.ets共 98 行逐段拆解附 4 张实机截图。一、整体结构三区Header 统计 时间轴布局日志页是保养统计 历史时间轴的组合布局——3 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.SummaryCard() this.SectionTitle(保养历史) this.Timeline() } .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 块结构SummaryCard— 双列统计卡保养次数 12 / 累计花费 ¥3860SectionTitle— 保养历史标题Timeline— 4 条圆点竖线保养时间轴按时间倒序日志页是保养账本——先看统计累计保养 12 次、花费 3860 元再看历史时间轴机油机滤更换/四轮换位/常规保养/空调滤芯更换按时间倒序让用户掌握这台车做过哪些保养、花了多少钱。与 App 55 续费日历的红点竖线时间轴同手法58 用浅青圆标是系列第二个时间轴页面。项目源码开源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 号、固定高、文字贴底与保养页、我的页同款。保养日志点明本页职能——查看维修保养历史。三、SummaryCard双列保养统计卡SummaryCard() { Row() { Column({ space: 4 }) { Text(12).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(保养次数).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) Column({ space: 4 }) { Text(¥3860).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.accent) Text(累计花费).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) } .width(100%).padding({ top: 16, bottom: 16 }).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }技术拆解双列均分Row 两个layoutWeight(1)Column——**保养次数12/ 累计花费¥3860**两列 1:1每列 22 号 Bold 数值 11 号淡灰标签。双色数值次数青C.primary、累计花费浅青C.accent——数值用主题色系区分次数 主青、花费 浅青。数据自洽累计花费 3860 时间轴 4 条之和48060650120 1310——演示数据的 3860 是全部历史累计含时间轴之外的更早保养时间轴只展示最近 4 条示例数据数字口径累计 vs 近期需在正文说明避免对不上账的困惑。双指标定位两个数字回答这台车保养过几次12 次与保养花了多少3860 元——频次 费用的累计快览。四、Timeline圆点竖线保养时间轴Timeline() { Column() { ForEach(this.logs, (l: LogItem, idx: number) { Row({ space: 12 }) { Column() { Row() { Text(l.emoji).fontSize(16) } .width(32).height(32).backgroundColor(C.primarySoft).borderRadius(16).justifyContent(FlexAlign.Center) if (idx this.logs.length - 1) { Column().width(2).height(48).backgroundColor(C.stroke) } }.width(32) Column({ space: 4 }) { Row() { Text(l.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1) Text(¥ l.cost).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.danger) }.width(100%) Text(l.mileage km · l.date).fontSize(12).fontColor(C.textDim) } .alignItems(HorizontalAlign.Start).layoutWeight(1).padding(12).margin({ bottom: 12 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) } .width(100%).alignItems(VerticalAlign.Top) }, (l: LogItem) l.id.toString()) }.width(100%) }4 条保养日志数据21-26 行项目里程日期费用️ 机油机滤更换12080 km2026-07-28¥480 四轮换位11000 km2026-06-15¥60 常规保养10000 km2026-05-02¥650❄️ 空调滤芯更换8500 km2026-03-20¥120卡片细节32×32 浅青圆标backgroundColor(C.primarySoft)#E0F5F5borderRadius(16)正圆 16 号 emoji——时间轴节点图标比 App 55 的红点大圆标内嵌 emoji 更丰富每个保养项目一个 emoji️❄️。竖线连接if (idx length - 1)画 2×48 竖线——非末项才画线最后一项无后续节点时间轴节点 连线结构。项目名 红色金额14 号 Medium 项目名 14 号 Bold¥480C.danger红——费用用警示红花钱 支出与项目名同行左右分布。里程·日期副行12 号淡灰12080 km · 2026-07-28——保养里程 日期在多少公里、什么时候做的layoutWeight(1)撑开。时间倒序07-28 → 06-15 → 05-02 → 03-20——最近保养在前2026-07-28 的机油机滤更换最新时间流符合直觉里程递减12080 → 11000 → 10000 → 8500里程随时间递增。五、跨页数据自洽保养日志的全局闭环日志页与首页、保养、我的三页形成闭环日志页机油机滤更换 12080 km ¥480↔ 首页机油机滤 还剩 500km——日志页记录的是最近一次机油保养07-28 在 12080 km首页还剩 500km由这次保养推算下次保养里程 ≈ 13080 - 当前 12580 500日志记录 → 首页剩余里程。日志页累计花费 ¥3860↔ 我的页¥3.8k 累计花费——金额完全一致3860 ≈ 3.8k 四舍五入日志给明细、我的页给统计。日志页12 次↔ 我的页12 保养次数——次数一致12 次累计日志页统计与我的页统计同源。日志页时间轴 4 条↔ 保养页记录保养——每次在保养页记录日志页时间轴新增一条录入即入日志时间轴是保养记录的历史沉淀。日志页四轮换位 11000km↔ 首页轮胎更换 还剩 8000km——轮胎相关保养换位 60 元与首页轮胎项目对应下次轮胎更换里程由周期推算日志历史支撑首页状态。六、系列横向对比时间轴页面的三种形态系列中时间轴型页面各有侧重App 58 保养日志青#008080浅青圆标时间轴 双列统计——保养历史项目 费用。App 55 续费日历红#FF6B6B红点竖线时间轴 年度汇总——扣款计划。App 44 纪念册淡紫#A29BFE时间轴 回忆照片——回忆叙事。58 与 55 都是圆点/红点竖线时间轴差异在节点形态与信息55 是红点12×12 纯色圆点 金额58 是浅青圆标32×32 内嵌 emoji 项目名 红色金额 里程日期——58 的节点更信息丰富emoji 标识项目类型因为保养日志的项目多样性需要图标区分机油/轮胎/常规/空调各有 emoji而续费日历的扣款项目同质都是订阅用纯点即可。58 的时间轴同时是日志账本记录花了多少钱。七、开发者避坑保养日志的四个细节从 Func2Tab 的实现提炼四个易踩坑点累计与近期的口径统计卡累计花费 ¥3860是全部历史、时间轴只展示 4 条示例——产品化应统一口径统计 全部记录之和时间轴可全量滚动或分页并确保统计 明细之和若只展示 4 条而统计是全部需说明更多记录向下滚动。竖线高度与卡片对齐竖线 48 高与卡片含底部 12 间距不完全匹配——产品化按卡片实际高度计算竖线高度或用弹性高度保证节点-连线-节点的视觉连续避免线长于卡或短于卡。时间与里程的排序当前按时间倒序07-28 在前——产品化按日期字段排序新记录自动插到顶部并校验里程随日期递增若某条记录里程小于前一条说明录入错误。费用汇总动态化¥3860 写死——产品化由所有日志费用求和每次记录保养自动累加新增记录后统计卡自动更新避免日志多了但统计不变。八、常见问题 FAQ问统计卡说累计花费 3860 元但时间轴 4 条加起来只有 1310 元为什么答统计卡的累计花费是全部历史保养费用3860 元含更早的 8 次保养时间轴只展示最近 4 条机油 480 换位 60 常规 650 空调 120 1310 元——最近 4 条是 3860 元的一部分1310 元更早的 8 次约 2550 元未在示例时间轴中展示演示数据只列了 4 条代表记录。产品化后时间轴应展示全部记录可滚动统计与明细完全对账。问日志页的时间轴和首页的保养项目是什么关系答时间轴是做过什么的历史记录每做一次保养记一条首页是还该做什么的状态计划每个项目还剩多少公里——日志是过去式记录首页是未来式计划两者通过保养周期衔接日志记录本次保养里程 → 加周期 下次保养里程 → 首页显示剩余。保养页的记录保养就是把过去记进日志、把未来算进首页的动作。问为什么费用用红色而项目名用深色答费用¥480用红色danger强调花了钱——保养日志是支出记录红色金额让用户在浏览历史时对花钱有感知哪次保养花得多常规保养 650 最高项目名用深色text保持中性项目名不携带情绪。颜色语义与 App 55 续费日历的红色金额一致支出 红系列费用红色的语义统一。九、验收与总结本篇对 58-car-maintain 日志页Func2Tab98 行做了逐块拆解三区结构Header保养日志 SummaryCard双列统计 SectionTitle Timeline圆点竖线时间轴核心交互无点击纯展示32×32 浅青圆标 红色金额主题色#008080青蓝——统计次数、圆标浅青底数据闭环日志 12080/480 → 首页 500km12/3860 → 我的页 12/3.8k保养记录 → 日志时间轴日志页是车辆保养提醒的保养账本——统计卡给结论12 次/3860 元、时间轴给历史4 条最近保养、里程日期费用一屏掌握这台车保养过什么、花了多少。十、扩展思考从保养日志到养车账本日志页的演进方向是养车账本第一是养车成本全览——当前只有保养费用3860 元演进方向是聚合保养 加油 保险 维修全部养车支出形成年度养车成本报告今年养车花了 2 万元油费 1 万、保养 3860、保险 5000日志页的保养费用是成本全览的一部分第二是保养频率分析——时间轴展示保养时间07-28、06-15、05-02、03-20演进方向是平均保养间隔分析多久保养一次2 个月5000km发现保养过频浪费或过疏伤车第三是单次保养对比——各次保养费用对比常规 650 元最高、四轮换位 60 元最低演进方向是同项目费用趋势机油保养每次多少钱、涨没涨帮助用户判断哪家店贵了第四是保养到期预测——基于历史保养间隔预测下次保养时间上次 07-28 机油 5000km ≈ 下次日志页的历史记录是预测的数据基础。这四个方向都从日志页已有的时间轴数据长出来让看历史变成管成本。十一、从设计稿到代码的映射把日志页设计稿翻译成代码有几组典型映射第一双列统计映射为两个等权重列容器——设计稿的保养次数与累计花费两列代码里用两个等权重列容器各放 22 号数值青与浅青与 11 号标签第二时间轴圆标映射为圆形容器加表情——设计稿的浅青圆点节点代码里用三十二乘三十二圆角十六的浅青底圆形容器内嵌十六号表情图标第三竖线连接映射为条件渲染的细长容器——设计稿节点间的竖线代码里用两单位宽四十八高的细容器非最后一项才渲染第四事件卡片映射为项目名加金额加里程日期——设计稿的保养卡片代码里用项目名与红色金额同行、里程日期副行的组合。这四组映射展示了日志时间轴的完整翻译与 App 55 的红点竖线时间轴同构58 用浅青圆标内嵌图标。十二、常见问题 FAQ问日志页的保养时间和里程为什么是倒序的答时间轴按时间倒序排列2026-07-28 最新在前、03-20 最早在后——用户浏览历史时最关心最近做了什么保养最新记录置顶减少滚动同时里程也随日期倒序递减12080 → 8500最近的保养里程最高时间与里程两个维度都最新在前。产品化后新记录自动插入顶部时间轴始终最新在上。问累计花费 3860 元包括什么答包括全部历史保养费用12 次保养的总花费——时间轴展示的 4 条机油 480 四轮换位 60 常规 650 空调 120 1310 元是最近 4 次更早的 8 次保养约 2550 元未在示例时间轴中列出演示数据只展示了 4 条代表记录3860 元是 12 次的总和。产品化后时间轴展示全部记录可滚动统计 明细之和完全对账。问时间轴的节点为什么用圆形图标而不是纯圆点答因为保养项目的类型多样机油/轮胎/常规/空调各有不同纯圆点无法区分做了什么保养32×32 的浅青圆标内嵌 16 号 emoji️❄️既是时间轴节点又标识项目类型扫一眼圆标就知道那次保养做了什么——比 App 55 续费日历的纯红点扣款项目同质不需要区分信息更丰富。十三、补充要点日志页三个细节再思考第一关于红色金额的支出语义。每次保养的费用用红色danger加粗——保养是支出花钱红色让花了多少在时间轴中醒目常规保养 650 元一眼可见与 App 55 续费日历、App 56 停车记录的红色金额语义一致系列费用 红的视觉语言统一。第二关于里程与日期的双信息。副行12080 km · 2026-07-28同时展示在多少公里做的与什么时候做的——保养记录的两个关键时间坐标里程维 日期维因为保养周期既可以按里程算5000km也可以按时间算半年双坐标让用户从任一维度回顾保养历史。第三关于圆标与竖线的视觉节奏。32×32 圆标 2 宽 48 高竖线 卡片底部 12 间距——圆标-竖线-圆标的串珠结构形成时间流动感圆标比 App 55 的红点大信息承载更多竖线比红点版更短卡片间距 12视觉节奏紧凑符合日志记录较多的场景。十四、最后总结日志页作为车辆保养提醒的账本页用两个区块完成了保养历史的完整呈现双列统计卡给结论12 次/3860 元、圆点竖线时间轴给明细4 条最近保养、里程日期费用。整页没有用户卡与菜单是系列纯数据页的又一代表——第 3 Tab 完全让给保养历史体现记录沉淀的产品价值。时间轴的圆标内嵌 emoji 让保养项目类型一目了然比纯文本列表更直观红色金额标注每次花费。从演示到产品日志页的进化方向是养车成本全览、保养频率分析、同项目费用对比、到期预测从看历史走向管成本。作为系列时间轴账本页的代表它与首页状态告警、保养页记录入口、我的页双保管理共同构成车辆保养提醒的完整链路记录 → 告警 → 历史 → 管理。十五、补充要点时间轴的工程细节再思考日志页的时间轴有几个工程细节值得再思考第一竖线高度与卡片高度的匹配——竖线固定 48 高、卡片含底部 12 间距两者并不严格相等竖线略短于卡片 间距的总高产品化应按卡片实际高度计算竖线长度或用弹性布局保证圆标-竖线-圆标的视觉连续线不悬空、不断裂第二数据渲染的性能——时间轴记录多了12 次、未来可能几十次ForEach 全量渲染会影响滚动性能产品化可用列表组件懒加载或分页先展示最近 20 条第三日期与里程的格式——日期2026-07-28年-月-日与里程12080 km整数 单位格式统一产品化用日期格式化函数与里程千位分隔12,080 km与首页保持一致第四时间轴的排序稳定性——当前按数据声明顺序已按时间倒序声明产品化按日期字段排序新记录自动插入顶部并处理同一天多条保养的顺序按录入先后。这四个细节共同保证时间轴看得顺、滚得快、排得对。十六、最后总结日志页解析至此完整收尾双列统计卡、圆点竖线时间轴、红色金额全部覆盖。读者可重点回顾圆标内嵌表情的时间轴节点设计——32×32 浅青圆标加 16 号表情让保养项目类型一目了然机油/轮胎/常规/空调比纯文本列表更直观是时间轴页面信息丰富的形态。车辆保养的历史从这一页展开12 次保养、3860 元花费、最近 4 次的里程日期费用让车主掌握这台车的保养轨迹与成本。