ArkUI-14-状态管理04-@Observed-@ObjectLink

//任务类
@Observed
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})
}

//任务统计信息
class StatInfo{
  totalTask:number=0
  finishTask:number=0
}

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

@Entry
@Component
struct PropPage{
  //统计信息
  // @State stat:StatInfo= new StatInfo()
  @Provide stat:StatInfo= new StatInfo()


  build(){
    Column({space:10}){
      //1.任务进度卡片
      TaskStatistics()

      //2.任务列表
      TaskList()//@Provide @Consume 系统自动传参不需要处理


    }.width('100%')
    .height('100%')
    .backgroundColor('#1F2F3')
  }

}


@Component
struct TaskStatistics {

  // @Prop finishTask:number
  // @Prop totalTask:number
  @Consume stat:StatInfo
  build() {
    Row(){
      Text('任务进度:')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      Stack(){
        Progress({
          value:this.stat.finishTask,
          total:this.stat.totalTask,
          type:ProgressType.Ring
        })
        Row(){
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor('#36D')
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }
      }

    }
    .card()
    .margin({top:20,bottom:10})
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}


@Component
struct TaskList {
  //总任务数量
  // @Link stat:StatInfo
  @Consume stat:StatInfo
  //任务数组
  @State tasks: Task[] = []

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

  }
  build() {
      Column(){
        Button('新建任务')
          .width(200)
          .onClick(()=>{
            //1.新增任务数据
            this.tasks.push(new Task())
            //2。更新任务数量
            this.handleTaskChange()
          })

        //3.任务的列表
        List({space:10}){
          ForEach(
            this.tasks,
            (item:Task,index)=>{
              ListItem(){
                TaskItem({item:item,onTaskChange:this.handleTaskChange.bind(this)})
              }.swipeAction({end:this.DeleteButton(index)})//滑动功能

            })
        }
        .width('100%')
        .layoutWeight(1)
        .alignListItem(ListItemAlign.Center)
      }
  }
  @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()//更新结果
    })
  }
}

@Component
struct TaskItem {
  @ObjectLink item: Task
  onTaskChange!:() => void
  

  build() {
    Row(){
      if(this.item.finished){
        Text(this.item.name)
          .fontSize(20)
          .finishedTask()
      }else{
        Text(this.item.name)
          .fontSize(20)
      }

      Checkbox()
        .select(this.item.finished)
        .onChange(val=>{
          //1.更新当前的状态
          this.item.finished = val
          //2.更新当前的状态
          // this.handleTaskChange()
          this.onTaskChange()
        })
    }
    .card()
    .justifyContent(FlexAlign.SpaceBetween)
  }
}