用鸿蒙next，arkui写一个类似Steps 的组件

在开发的时候发现需要在鸿蒙中展示一个类似steps的组件功能，结果找遍arkui组件库，没有类似的组件，没办法，只能手搓一个了 效果图如下：

组件源码为：

import { stepsType } from '../../../data'

@Component
export struct Steps{
  @Prop steps:stepsType[]
  private stepClick:Function=()=>{}
  build() {
    Column(){
        ForEach(this.steps,(item:stepsType,index:number)=>{
          Row(){
            Column(){
              if(item.is_doing){
                Image($r('app.media.auditing')).width(20).height(20).borderRadius(10).backgroundColor("#fff").zIndex(2)
              }else {
                Text().width(6).height(6).backgroundColor(item.is_done?$r('app.color.theme_color'):$r('app.color.deep_gray_color')).borderRadius(3)
              }

             if(index!==this.steps.length-1){
               Divider().vertical(true).width(1).height('calc(100% + 2vp)').position({left:20,top:6}).backgroundColor(item.is_done?$r('app.color.theme_color'):$r('app.color.deep_gray_color'))
             }
            }.width(40)
            Column(){
              Text(item.value).fontSize($r('app.float.progress_font')).margin({bottom:4})
              Text(item.time).fontSize($r('app.float.small_font')).fontColor($r('app.color.deep_gray_color'))
            }.alignItems(HorizontalAlign.Start)
          }.height(80).width('100%')
          .onClick(()=>{
            this.stepClick(item)
          })
        },(item:stepsType)=>JSON.stringify(item))
    }
  }
}

其中相关联的数据和数据类型为：

interface stepsType {
  value: string,
  time?: string,
  is_done?: boolean,
  is_doing?: boolean
}

let steps_info: stepsType[] = [
  {
    value: '发起审核',
    time: '2024 0303 33333333',
    is_done: true,
    is_doing: false,
  },
  {
    value: '人工审核',
    time: '预计3天左右',
    is_done: false,
    is_doing: true,
  }, {
  value: '审核成功',
  time: '',
  is_done: false,
  is_doing: false,
}
]

使用：

import { Steps } from './componment/steps';
Steps({ steps:steps_info,
stepClick:this.stepClick.bind(this)
 })
 
stepClick(val:stepsType){
  console.log(JSON.stringify(val))
}