构建时间轴（横轴）鸿蒙示例代码

鸿蒙场景化示例代码

已于 2025-05-14 14:00:25 修改

阅读量266

点赞数 4

文章标签： harmonyos

于 2025-02-13 16:03:03 首次发布

本文链接：https://blog.csdn.net/yaomoguiguai242/article/details/145614464

版权

本文原创发布在华为开发者社区，更多鸿蒙场景化示例请见华为开发者联盟官网“行业实践与常见问题”专题页。

介绍

本示例通过List组件实现时间轴（横轴）构建。

构建时间轴（横轴）源码链接

效果预览

在这里插入图片描述

使用说明

打开应用后，时间轴构建完成，用户可以拖动时间轴进行查看。

实现思路

通过List组件构建时间轴，使用foreach进行循环构建。

List(){
  ForEach(this.list,(item:DList)=>{
    ListItem(){...}
    .width('40%')
  })
}
.alignListItem(ListItemAlign.Center)
.listDirection(Axis.Horizontal)