前言

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

實(shí)現(xiàn)效果

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

需求分析

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

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

技術(shù)實(shí)現(xiàn)

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

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

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

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

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

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

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

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

// 時(shí)間軸
        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. 同時(shí)虛線部分應(yīng)該有最小高度，然后通過當(dāng)前 Item 的高度變化動(dòng)態(tài)改變虛線的高度,鴻蒙布局組件提供了 onAreaChange 方法用來監(jiān)聽當(dāng)前布局高度的變化,通過修改最新高度來實(shí)現(xiàn)虛線的動(dòng)態(tài)變化。注意這個(gè) minHeight 必須使用@state修飾。

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

6. 最后使用 Row 布局將虛線布局和內(nèi)容布局橫向排列，就可以實(shí)現(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() {
          // 時(shí)間軸節(jié)點(diǎn)
          Image(this.getImage(this.bean.nodeStatus ?? 0))
            .width(16)
            .height(16)
            .borderRadius(8)

          // 時(shí)間軸
          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é)

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

審核編輯 黃宇