ArkUI-12-状态管理02

@Pro  @Link @Provide @Consume

代码：

//任务类
class Task{
  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})
}

//任务完成样式
@Extend(Text)  function finishedTask(){
  .decoration({type:TextDecorationType.LineThrough})
  .fontColor('#B1B2B1')
}

@Entry
@Component
struct PropPage{
  //总任务数量
  @State totalTask:number=0
  //已经完成任务数量
  @State finishTask:number=0
  //任务数组
  @State tasks: Task[] = []

  handleTaskChange(){
    //1。更新任务数量
    this.totalTask=this.tasks.length
    //2.更新当前的状态
    this.finishTask = this.tasks.filter(item=> item.finished).length

  }
  
  build(){
    Column({space:10}){
      //1.任务进度卡片
      Row(){
        Text('任务进度:')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        Stack(){
          Progress({
            value:this.finishTask,
            total:this.totalTask,
            type:ProgressType.Ring
          })
          Row(){
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor('#36D')
            Text(' / ' + this.totalTask.toString())
              .fontSize(24)
          }
        }

      }
      .card()
      .margin({top:20,bottom:10})
      .justifyContent(FlexAlign.SpaceEvenly)
      //2.新增任务按钮
      Button('新建任务')
        .width(200)
        .onClick(()=>{
          //1.新增任务数据
          this.tasks.push(new Task())
          //2。更新任务数量
          this.handleTaskChange()
        })

      //3.任务的列表
     List({space:10}){
       ForEach(
         this.tasks,
         (item:Task,index)=>{
           ListItem(){
             Row(){
               Text(item.name)
                 .fontSize(20)
               Checkbox()
                 .select(item.finished)
                 .onChange(val=>{
                   //1.更新当前的状态
                   item.finished = val
                   //2.更新当前的状态
                   this.handleTaskChange()

                 })
             }
             .card()
             .justifyContent(FlexAlign.SpaceBetween)
           }.swipeAction({end:this.DeleteButton(index)})//滑动功能

       })
     }
     .width('100%')
     .layoutWeight(1)
     .alignListItem(ListItemAlign.Center)


    }.width('100%')
    .height('100%')
    .backgroundColor('#1F2F3')
  }
  @Builder DeleteButton(index:number){
        Button(){//删除按钮
          Image($r('app.media.delete'))
            .fillColor(Color.White)
            .width(20)
        }
     .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(10)
    .onClick(()=>{
      this.tasks.splice(index,1)//删除当前这条
      this.handleTaskChange()//更新结果
    })
  }
}