前言

快遞信息時間軸在購物軟件中是必不可少的功能，通過時間軸可以展示快遞從發貨到派送的每一個環節。本篇文章通過代碼的形式詳細講解在鴻蒙日常開發中如何實現時間軸的效果。(篇尾附有完整源碼)

實現效果

先看最終實現的效果，下面通過代碼講解怎么一步步實現時間軸。

需求分析

1. 快遞信息時間軸整體包括三個狀態：開始狀態，當前狀態，未達狀態。
2. 不同狀態對應標題顏色及圖標不同。
3. 字體顏色可根據狀態的不同改變。
4. 提示文字可以根據具體情況是否顯示
5. 時間軸上的虛線可以根據當前節點布局的高度動態改變。(重點)

根據具體需求，采用 List 組件實現時間軸，然后通過控制不同 item 的狀態來實現效果。

技術實現

1. 定義節點數據對象，這里使用不同數字代表當前節點的狀態：1 表示開始，2 表示當前，3 表示即將到達。

export class OrderDetailBean{
   nodeStatus?: number //當前節點狀態 
   nodeName?: string //節點名稱
   nodeNote?: string //節點備注
   nodeTime?: string //節點時間 
}

2. 構建節點集合。

aboutToAppear(): void {
    let order1 = new OrderDetailBean()
    order1.nodeStatus = 1
    order1.nodeName = "唐僧已經從長安出發"
    order1.nodeTime = "1900-7-25  14:30:03"
    order1.nodeNote = ""

    let order2 = new OrderDetailBean()
    order2.nodeStatus = 1
    order2.nodeName = "唐僧到達五指山"
    order2.nodeNote = "溫馨提示：此處有妖猴出沒"
    let order3 = new OrderDetailBean()
    order3.nodeStatus = 1
    order3.nodeName = "孫悟空護送唐僧西天取經"
    order3.nodeNote = "請小白龍提前準備，下一站化身白龍馬。"
    let order4 = new OrderDetailBean()
    order4.nodeStatus = 2
    order4.nodeName = "唐僧到達高老莊"
    order3.nodeNote = "孫悟空大戰豬八戒"
    let order5 = new OrderDetailBean()
    order5.nodeStatus = 3
    order5.nodeName = "唐僧即將到達流沙河"
    order5.nodeNote = "收服卷簾大將沙悟凈。"
    let order6 = new OrderDetailBean()
    order6.nodeStatus = 3
    order6.nodeName = "唐僧即將到達大雷音"
    order6.nodeNote = "取得真經，修成正果。"
    this.list.push(order1, order2, order3, order4, order5,order6)
  }

3. 使用 List 組件實現時間軸，鴻蒙的 List 組件原生支持橫向和縱向布局，可以根據實際需求進行調整。這里使用默認縱向布局。

List(){
        ForEach(this.list,(item: object, index: number) = > {
          this.itemView(this.list[index], index)
        })
      }.width("100%")
        .height("100%")

4. 接下來就是繪制 List 的 item,從最終的效果圖來看，虛線部分只會在首尾之間顯示，這里通過集合長度判斷。最后一條虛線不顯示，虛線可以通過設置布局邊框的不同樣式實現，這里使用的BorderStyle.Dashe。

// 時間軸
        if (this.index < this.totalSize - 1) {
          Stack()
            .width(0)
            .borderStyle(BorderStyle.Dashed)
            .borderWidth(0.8)
            .height(this.minHeight)
            .borderColor($r('app.color.color_gray'))

        }

5. 同時虛線部分應該有最小高度，然后通過當前 Item 的高度變化動態改變虛線的高度,鴻蒙布局組件提供了 onAreaChange 方法用來監聽當前布局高度的變化,通過修改最新高度來實現虛線的動態變化。注意這個 minHeight 必須使用@state修飾。

.onAreaChange((oldValue: Area, newValue: Area) = > {
        this.minHeight = newValue.height as number
      })

6. 最后使用 Row 布局將虛線布局和內容布局橫向排列，就可以實現虛線跟隨內容高度變化。

完整源碼

@Component
  struct ItemLayout {
    @State bean: OrderDetailProgressBean = new OrderDetailProgressBean()
    index: number = 0
    totalSize: number = 0
    @State minHeight: number = 54

    build() {
      Row() {
        Column() {
          // 時間軸節點
          Image(this.getImage(this.bean.nodeStatus ?? 0))
            .width(16)
            .height(16)
            .borderRadius(8)

          // 時間軸
          if (this.index < this.totalSize - 1) {
            Stack()
              .width(0)
              .borderStyle(BorderStyle.Dashed)
              .borderWidth(0.8)
              .height(this.minHeight)
              .borderColor("#BABEC4")

          }
        }

        // 內容區域
        Column() {
          Text(this.bean.nodeName)
            .fontSize(14)
            .fontColor(this.getColor(this.bean.nodeStatus ?? 0))
            .fontWeight(FontWeight.Medium)


          Text(this.bean.nodeTime)
            .fontSize(12)
            .fontColor(Color.Gray)
            .margin({
              top: 4,
            })
          Text(this.bean.nodeNote)
            .fontSize(12)
            .fontColor(this.bean.nodeStatus == 1 ? Color.Gray : Color.Orange)
            .margin({
              top: 8,
            })

        }
        .margin({
          left: 8,
        })
          .alignItems(HorizontalAlign.Start)
          .width("84%")
          .margin({
            left: 8,
          })
          .onAreaChange((oldValue: Area, newValue: Area) = > {
            this.minHeight = newValue.height as number
          })
      }
      .alignItems(VerticalAlign.Top)
        .width("100%")
    }

    getImage(state: number) {
      if (state == 1) {
        return $r("app.media.icon_complete")
      } else if (state == 2) {
        return $r("app.media.icon_selecte")
      } else {
        return $r("app.media.icon_unselecte")
      }
    }

    getColor(state: number) {
      if (state == 1) {
        return $r("app.color.color_gray")
      } else if (state == 2) {
        return $r("app.color.color_black")
      } else {
        return $r("app.color.color_gray_1")
      }
    }
  }

總結

本文的重點是知道虛線可以根據設置布局樣式實現，然后就是如何實現虛線和布局動態高度變化同步，通過鴻蒙原生組件提供的方法可以實現。

審核編輯 黃宇