AriUI-13-状态管理03父子同步@prop&@Link

1.@prop 不对数据渲染只是使用的时候用这个-【单向同步】

2.@Link 子组件需要对父组件做修改，系统父组件会告诉prop有link修改了数据更新，此时用这个。-【双向同步】

@prop和@Link

//任务类
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()


  build(){
    Column({space:10}){
      //1.任务进度卡片
        TaskStatistics({finishTask:this.stat.finishTask,totalTask:this.stat.totalTask})

      //2.任务列表（双向同步不能用poro）$引用 否则会报错。但是我这里用this也没报错。奇怪
        TaskList({stat:this.stat})


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

}


@Component
struct TaskStatistics {

  @Prop finishTask:number
  @Prop totalTask:number

  build() {
    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)
  }
}


@Component
struct TaskList {
  //总任务数量
  @Link 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(){
                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)
      }
  }
  @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()//更新结果
    })
  }
}

________________

//@Provide @Consume 系统自动传参不需要处理但是效率上没有 @prop @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})
}

//任务统计信息
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(){
                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)
      }
  }
  @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()//更新结果
    })
  }
}