HarmonyOS 如何实现事件时间轴？

Question

如题：HarmonyOS 如何实现事件时间轴？

Answer 1

时间轴布局可使用list组件，缩放等手势可通过给组件绑定手势事件的方法手势事件：【https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/5\_3\_u624b\_u52bf\_u5904\_u7406-V5】

时间轴样式可参考如下代码

interface DList {
  id:number
  textContent:string
  time:string
  icon:Resource
  isPassed:Boolean
  isCurrent:Boolean
}
@Entry
@Component
struct DemoList {
  @State list:DList[] = [
    {
      id: 1,
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
      time:'15:01',
      icon:$r('app.media.icon'),
      isPassed:true,
      isCurrent:false
    },
    {
      id: 2,
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
      time:'15:02',
      icon:$r('app.media.icon'),
      isPassed:false,
      isCurrent:true
    },
    {
      id: 3,
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。在页面内容很多时，若用户需快速定位，可拖拽滚动条，如下图所示。',
      time:'15:03',
      icon:$r('app.media.icon'),
      isPassed:false,
      isCurrent:false
    },
    {
      id: 4,
      textContent: '当列表项高度（宽度）超出屏幕高度（宽度）时，列表可以沿垂直（水平)方向滚动。',
      time:'15:04',
      icon:$r('app.media.icon'),
      isPassed:false,
      isCurrent:false
    },
  ]
  @State listLength:Number = this.list.length;
  build() {
    Column(){
      List(){
        ForEach(this.list,(item:DList)=>{
          ListItem(){
            Column(){
              Row(){
                Image(item.isPassed || item.isCurrent? $r('app.media.ic_cart_focus') : $r('app.media.ic_cart_normal'))
                  .width(item.isCurrent?16:10)
                  .height(item.isCurrent?16:10)
                  .margin({right:item.isCurrent?8:5})
                Text(item.time)
              }.margin({left:item.isCurrent?-8:-5})
              Column(){
                Row(){
                  Text(){
                    Span(item.textContent)
                    ImageSpan(item.icon)
                      .width(20)
                      .height(20)
                      .verticalAlign(ImageSpanAlignment.BOTTOM)
                  }
                }
                .padding({left:10})
              }
              .border({width:{left:item.id == this.listLength ? 0 : 1 },color:item.isPassed?'#e3bbbb':'#dddddd'})
            }
            .alignItems(HorizontalAlign.Start)
            .width('80%')
            .margin({bottom:10})
          }
        })
      }.alignListItem(ListItemAlign.Center)
    }
  }
}