时间轴组件：Circle 节点 + 竖线连接 + 内容列表

前言

在"海风日记"的回顾页中，时间轴以垂直线的形式展示最近日记，每个节点是一个圆点，连接线为竖线，右侧展示日记内容和日期。

本文将从源码出发，深入讲解时间轴组件的实现。

一、时间轴实现

1.1 源码

typescript 复制代码

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 节点

typescript 复制代码

Circle().width(10).height(10).fill(COLOR_PRIMARY)

2.2 连接线

typescript 复制代码

Row().width(1).layoutWeight(1).backgroundColor('rgba(245,166,35,0.25)')

三、内容区域

typescript 复制代码

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×10	`COLOR_PRIMARY`
连接线	1vp 宽	`rgba(245,166,35,0.25)`
日期文字	11vp	`COLOR_TEXT_HINT`
内容文字	13vp	`COLOR_TEXT_MAIN`

五、常见问题

5.1 连接线高度不一致

问题：不同日记项之间的连接线高度不一致。

原因：layoutWeight(1) 分配剩余空间，内容高度不同导致连接线高度不同。

解决方案 ：使用固定高度替代 layoutWeight(1)。

总结

本文通过"海风日记"的时间轴，深入讲解了时间轴组件的实现：

Circle 节点：橙色圆点
竖线连接：1vp 宽橙色线
内容区域：日期 + 正文摘要
点击跳转：进入日记详情

下一篇文章将深入讲解 statCard 构建器，敬请期待。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

Circle 组件文档
Row 组件文档
ForEach 文档
海风日记项目源码
$HarmonyOS 开发者官网$ (https://atomgit.com/openharmony/docs
开源鸿蒙跨平台社区