前言在“海风日记“的回顾页中时间轴以垂直线的形式展示最近日记每个节点是一个圆点连接线为竖线右侧展示日记内容和日期。本文将从源码出发深入讲解时间轴组件的实现。一、时间轴实现1.1 源码Column({ space: 0 }) { Text(最近日记) .fontSize(15).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) .padding({ left: PAGE_PADDING, bottom: 12 }) ForEach(MOCK_DIARIES.slice(0, 3), (diary: DiaryEntry) { Row({ space: 12 }) { // 时间轴线 Column() { Circle().width(10).height(10).fill(COLOR_PRIMARY) // 节点 Row().width(1).layoutWeight(1).backgroundColor(rgba(245,166,35,0.25)) // 连接线 } .width(10).alignItems(HorizontalAlign.Center) // 内容 Column({ space: 6 }) { Text(diary.date).fontSize(11).fontColor(COLOR_TEXT_HINT) // 日期 Text(diary.content) .fontSize(13).fontColor(COLOR_TEXT_MAIN).maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }).lineHeight(20) // 内容 } .layoutWeight(1).alignItems(HorizontalAlign.Start) .padding({ bottom: 20 }) .onClick(() router.pushUrl({ url: pages/diary/DiaryDetailPage })) } .width(100%).alignItems(VerticalAlign.Top) .padding({ left: PAGE_PADDING 4 }) }, (diary: DiaryEntry) diary.id) }二、时间轴布局● ← 橙色圆点节点10×10 │ ← 橙色竖线连接线1vp 宽 │ ● ← 第二个节点 │ ● ← 第三个节点无底部连接线2.1 节点Circle().width(10).height(10).fill(COLOR_PRIMARY)2.2 连接线Row().width(1).layoutWeight(1).backgroundColor(rgba(245,166,35,0.25))三、内容区域Column({ space: 6 }) { Text(diary.date).fontSize(11).fontColor(COLOR_TEXT_HINT) // 日期 Text(diary.content) .fontSize(13).fontColor(COLOR_TEXT_MAIN) .maxLines(2).textOverflow({ overflow: TextOverflow.Ellipsis }) .lineHeight(20) }四、时间轴样式元素尺寸颜色节点10×10COLOR_PRIMARY连接线1vp 宽rgba(245,166,35,0.25)日期文字11vpCOLOR_TEXT_HINT内容文字13vpCOLOR_TEXT_MAIN五、常见问题5.1 连接线高度不一致问题不同日记项之间的连接线高度不一致。原因layoutWeight(1)分配剩余空间内容高度不同导致连接线高度不同。解决方案使用固定高度替代layoutWeight(1)。总结本文通过“海风日记“的时间轴深入讲解了时间轴组件的实现Circle 节点橙色圆点竖线连接1vp 宽橙色线内容区域日期 正文摘要点击跳转进入日记详情下一篇文章将深入讲解statCard 构建器敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源Circle 组件文档Row 组件文档ForEach 文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区