带删除功能的任务进度harmonyOs next

class Task{
  //id
  static  id:number =1
  //任务名称
  name:string =`任务${Task.id++}`
  //任务状态：是否完成
  finished: boolean = false
}

@Styles function card(){
  .width('95%')
  .padding(20)
  .backgroundColor(Color.White)
  .borderRadius(15)
  //为组件添加阴影效果。
  .shadow({radius:6,color:'#1F000000',offsetX: 2,offsetY: 4})
}



//任务进度
@Entry
@Component
struct Page2 {
  //跟新当前状态 //跟新已完成的任务数
  changetext(){
  //跟新当前状态
    // 更新任务总量
    this.totalTask =this.tasks.length
  //跟新已完成的任务数
  this.finishTask =this.tasks.filter(item => item.finished).length

}


  //总任务数
  @State totalTask: number =0
  //已完成的任务数
  @State finishTask: number =0
  //任务数组
  @State tasks: Task[] = []

  build() {
  Column(){
//r任务进度卡片
    Row(){
      Text('任务进度').fontSize(30).fontWeight(FontWeight.Bold)
      Row(){

        Stack(){
          //环行进度条***********
          Progress({
            value:this.finishTask,
            total:this.totalTask,
            type:ProgressType.Ring
          }).width(100)
          Row(){
            Text(this.finishTask.toString()).fontSize(24).fontColor('#36D')
            Text('/'+this.totalTask.toString()).fontSize(24)
          }

        }

      }

    }
    .card()
    .margin({top:20,bottom:10})
    .justifyContent(FlexAlign.SpaceEvenly)
    Button('新增任务').width(200)
      //点击新增任务数据
      .onClick(() =>{
        this.tasks.push(new Task())
       // 更新任务总量
       //  this.totalTask =this.tasks.length
        this.changetext()
      })
List({space:10}){

        ForEach(
          this.tasks,
          (item:Task,index:number) =>{
            ListItem(){
            Row()
            {
              Text(item.name).fontSize(20)
              Checkbox().select(item.finished)
                .onChange( val =>{
                  //跟新当前状态
                  item.finished =val
                  //跟新已完成的任务数
                  this.changetext()
                  // this.finishTask =this.tasks.filter(item => item.finished).length
                })
            }.card()
            .justifyContent(FlexAlign.SpaceBetween)
          }
          .swipeAction({end:this.DeleteButton(index)})

          }
        )

}
.width('100%')
    .layoutWeight(1)


    }
    .height('100%')
    .width('100%')
    .backgroundColor('#F1F2F3')

  }
  @Builder DeleteButton(index: number){
    Button(){
      Image($r('app.media.zfb_nav7')).fillColor(Color.Black).width(20)
    }
    .width(40).height(40).type(ButtonType.Circle).backgroundColor(Color.Red).margin(5)
    .onClick(() =>{
      this.tasks.splice(index,1)
      this.changetext()
    })
  }
}