前言

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

實現(xiàn)效果

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

需求分析

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

根據(jù)具體需求，采用 List 組件實現(xiàn)時間軸，然后通過控制不同 item 的狀態(tài)來實現(xiàn)效果。

技術實現(xiàn)

1. 定義節(jié)點數(shù)據(jù)對象，這里使用不同數(shù)字代表當前節(jié)點的狀態(tài)：1 表示開始，2 表示當前，3 表示即將到達。

export class OrderDetailBean{
   nodeStatus?: number //當前節(jié)點狀態(tài) 
   nodeName?: string //節(jié)點名稱
   nodeNote?: string //節(jié)點備注
   nodeTime?: string //節(jié)點時間 
}

2. 構(gòu)建節(jié)點集合。

aboutToAppear(): void {
    let order1 = new OrderDetailBean()
    order1.nodeStatus = 1
    order1.nodeName = "唐僧已經(jīng)從長安出發(fā)"
    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 = "孫悟空護送唐僧西天取經(jīng)"
    order3.nodeNote = "請小白龍?zhí)崆皽蕚?，下一站化身白龍馬。"
    let order4 = new OrderDetailBean()
    order4.nodeStatus = 2
    order4.nodeName = "唐僧到達高老莊"
    order3.nodeNote = "孫悟空大戰(zhàn)豬八戒"
    let order5 = new OrderDetailBean()
    order5.nodeStatus = 3
    order5.nodeName = "唐僧即將到達流沙河"
    order5.nodeNote = "收服卷簾大將沙悟凈。"
    let order6 = new OrderDetailBean()
    order6.nodeStatus = 3
    order6.nodeName = "唐僧即將到達大雷音"
    order6.nodeNote = "取得真經(jīng)，修成正果。"
    this.list.push(order1, order2, order3, order4, order5,order6)
  }

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

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

4. 接下來就是繪制 List 的 item,從最終的效果圖來看，虛線部分只會在首尾之間顯示，這里通過集合長度判斷。最后一條虛線不顯示，虛線可以通過設置布局邊框的不同樣式實現(xiàn)，這里使用的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 的高度變化動態(tài)改變虛線的高度,鴻蒙布局組件提供了 onAreaChange 方法用來監(jiān)聽當前布局高度的變化,通過修改最新高度來實現(xiàn)虛線的動態(tài)變化。注意這個 minHeight 必須使用@state修飾。

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

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

完整源碼

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

    build() {
      Row() {
        Column() {
          // 時間軸節(jié)點
          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")

          }
        }

        // 內(nèi)容區(qū)域
        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")
      }
    }
  }

總結(jié)

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

審核編輯 黃宇