HarmonyOS 自定义StepperView组件如何实现？

Question

我想实现如图所示的StepperView组件，使用哪种方式实现好一些

Answer 1

自定义组件可以根据自己的需求，对demo中的组件布局和组件的大小进行调整，达到自己需求的效果，下面的Demo供参考：

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.app_icon'),
      isPassed:true,
      isCurrent:false
    },
    {
      id: 2,
      textContent: '事件二',
      time:'15:02',
      icon:$r('app.media.app_icon'),
      isPassed:false,
      isCurrent:true
    },
    {
      id: 3,
      textContent: '事件三',
      time:'15:03',
      icon:$r('app.media.app_icon'),
      isPassed:false,
      isCurrent:false
    },
    {
      id: 4,
      textContent: '事件四',
      time:'15:04',
      icon:$r('app.media.app_icon'),
      isPassed:false,
      isCurrent:false
    },
  ]
  @State listLength:Number = this.list.length;
  build() {
    Column(){
      List(){
        ForEach(this.list,(item:DList)=>{
          ListItem(){
            Column(){
              Text(item.textContent)
                .margin({bottom:10})
                .fontSize(12)
              Row(){
                Image(item.isPassed || item.isCurrent ? $r('app.media.startIcon') : $r('app.media.startIcon'))
                  .width(10)
                  .height(10)
                // .margin({right: 5,left:5})
                Text()
                  .width('100%')
                    // .margin({right: 5,left:5})
                  .border({width:{top:this.listLength == item.id ? 0 : 1},color:item.isPassed ? '#EA2D53' : '#dddddd'})
              }
              .width('100%')
              .margin({left:'82%'})
            }
            .width('100%')
          }
          .width('25%')
        })
      }
      .alignListItem(ListItemAlign.Center)
      .listDirection(Axis.Horizontal)
    }
  }
}