状态管理@Prop、@Link装饰器

@Prop @Link

父子组件进行数据同步化
@prop 单向同步只支持string、number、boolean、enum类型
负组件对象类型，总组件是对象类型
不可以是数组、any
不允许子组件初始化
@Link双向同步
父子类型一直：string、number、boolean、enum、object、class以及他们的数组
数组元素crud会引起嵌套类型以及数组中的对象熟悉无法出发视图更新
父组件传递，禁止子组件初始化

class Task2{
  static id:number = 1
  name:string = `任务：${Task2.id++}`
  state:boolean = false

}
//统一卡片样式
@Styles function card2(){
  .width('95%')
  .padding(20)
  .borderRadius(15)
  .backgroundColor(Color.White)
  .shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard2(){
  .decoration({type:TextDecorationType.LineThrough})
  .backgroundColor('#B1B2B1')
}

class totalInfo{
  totalTask:number = 0
  finishTask:number = 0
}

@Entry
@Component
struct taskProvideConsume{
  //统计
  @State total: totalInfo = new totalInfo()
  build(){
    Column({space:10}) {
      //1.任务进度
     taskTest2({finishTask:this.total.finishTask,totalTask:this.total.totalTask})
      //2.新增任务按钮 //3.任务列表
      taskList2({total:$total})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct taskTest2{
  @Prop totalTask:number
  @Prop finishTask:number
  build(){
    Row() {
      Text("任务进度：")
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Stack() {
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })
          .width('100')
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor('blue')
          Text(' / ' + this.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card2()
    .margin({ top: 10, bottom: 10 })
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Component
struct taskList2{
  //总任务数
  @Link total: totalInfo
  @State Tasks2:Task2[]=[]
  //创建一个更新函数
  handleTaskChange(){
    this.total.totalTask = this.Tasks2.length
    this.total.finishTask = this.Tasks2.filter(item => item.state).length
  }
  build(){
    Column(){
      Button('新增任务')
        .onClick(() => {
          this.Tasks2.push(new Task2())
          //this.totalTask = this.Tasks.length
          this.handleTaskChange()
        })
        .fontSize(20)
      List(){
        ForEach(
          this.Tasks2,
          (item:Task2, index) =>{
            ListItem(){
              Row(){
                Text(item.name)
                  .fontSize(25)
                Checkbox()
                  .select(item.state)
                  .onChange(val =>{
                    item.state = val
                    //完成的数量 = 任务列表中filter状态的长度
                    //this.finishTask = this.Tasks.filter(item => item.state).length
                    this.handleTaskChange()
                  })
              }
              .card2()
              .margin({top:15})
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({end: this.DeleteCard(index)})
          })
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }
  @Builder DeleteCard(index:number){
    Button(){
      Image($r('app.media.ic_public_delete_filled'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(()=>{
      this.Tasks2.splice(index,1)
      this.handleTaskChange()
    })
  }
}

学习常见bug

A preview error may have occurred. Switch to the Log tab to view details

解决方法：
在这里插入图片描述

这个报错通常是路由跳转时发生的，首先查看路由表中是否有当前页面。
路由表路径： entry > src > main > resources > base > profile > main_pages.json

@ObjectLink、@Observed

用于设计嵌套对象或者数组元素为对进行双向数据同步

完整版任务进度

@Observed
class Task2{
  static id:number = 1
  name:string = `任务：${Task2.id++}`
  state:boolean = false

}
//统一卡片样式
@Styles function card2(){
  .width('95%')
  .padding(20)
  .borderRadius(15)
  .backgroundColor(Color.White)
  .shadow({radius:5,color:'yellow',offsetX:2,offsetY:4})
}
//任务完成样式
@Extend(Text) function finishCard2(){
  .decoration({type:TextDecorationType.LineThrough})
  .backgroundColor('#B1B2B1')
}

class totalInfo{
  totalTask:number = 0
  finishTask:number = 0
}

@Entry
@Component
struct taskProvideConsume{
  //统计
  @State total: totalInfo = new totalInfo()
  build(){
    Column({space:10}) {
      //1.任务进度
     taskTest2({finishTask:this.total.finishTask,totalTask:this.total.totalTask})
      //2.新增任务按钮 //3.任务列表
      taskList2({total:$total})
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F1F2F3')
  }
}

@Component
struct taskTest2{
  @Prop totalTask:number
  @Prop finishTask:number
  build(){
    Row() {
      Text("任务进度：")
        .fontSize(40)
        .fontWeight(FontWeight.Bold)
      Stack() {
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })
          .width('100')
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor('blue')
          Text(' / ' + this.totalTask.toString())
            .fontSize(24)
        }
      }
    }
    .card2()
    .margin({ top: 10, bottom: 10 })
    .justifyContent(FlexAlign.SpaceEvenly)
  }
}

@Component
struct taskList2{
  //总任务数
  @Link total: totalInfo
  @State Tasks2:Task2[]=[]
  //创建一个更新函数
  handleTaskChange(){
    this.total.totalTask = this.Tasks2.length
    this.total.finishTask = this.Tasks2.filter(item => item.state).length
  }
  build(){
    Column(){
      Button('新增任务')
        .onClick(() => {
          this.Tasks2.push(new Task2())
          //this.totalTask = this.Tasks.length
          this.handleTaskChange()
        })
        .fontSize(20)
      List(){
        ForEach(
          this.Tasks2,
          (item:Task2, index) =>{
            ListItem(){//传参 传函数
              itemList({ item: item,onTaskChange:this.handleTaskChange.bind(this)})
            }
            .swipeAction({end: this.DeleteCard(index)})
          })
      }
      .width('100%')
      .layoutWeight(1)
      .alignListItem(ListItemAlign.Center)
    }
  }
  @Builder DeleteCard(index:number){
    Button(){
      Image($r('app.media.ic_public_delete_filled'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .onClick(()=>{
      this.Tasks2.splice(index,1)
      this.handleTaskChange()
    })
  }
}
@Component
struct itemList{
  @ObjectLink item:Task2
  onTaskChange: ()=>void
  build(){
    Row(){
      if (this.item.state){
        Text(this.item.name)
          .fontSize(25)
          .finishCard2()
      }else {
        Text(this.item.name)
          .fontSize(25)
      }
      Checkbox()
        .select(this.item.state)
        .onChange(val =>{
          this.item.state = val
          //完成的数量 = 任务列表中filter状态的长度
          //this.finishTask = this.Tasks.filter(item => item.state).length
          //this.handleTaskChange()
          this.onTaskChange()
        })
    }
    .card2()
    .margin({top:15})
    .justifyContent(FlexAlign.SpaceBetween)
  }
}