鸿蒙开发学习笔记——状态管理

在声明式UI中，是以状态驱动试图更新：

读取状态（State）渲染视图（View），用户在视图中互动，互动事件又更变状态。

状态（State）：指驱动视图更新的数据（被装饰器标记的变量，如：@State message）

视图（View）：基于UI描述渲染得到的用户界面

一、@State装饰器

1.@State特性

1）@State装饰器标记的变量必须初始化，不能为空值

2）@State支持Object、class、string、number、boolean、enum类型以及这些类型的数组

3）嵌套类型（比如Object中嵌套一个Object）以及数组中的对象属性无法触发试图更新

2.特性例子

1）简单类型如String、number

@Entry
@Component
struct StatePage {
  @State name: string = 'Jack'
  @State age: number = 21

  build() {
    Column() {
      // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
      Text(`${this.name} : ${this.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.age++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

此代码实现的界面如下：

点击前：

点击后数字加1。

2）复杂类型，如class

class Person {
  name: string
  age: number

  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
}

@Entry
@Component
struct StatePage2 {
  @State p: Person = new Person('Jack', 21)

  build() {
    Column() {
      // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
      Text(`${this.p.name} : ${this.p.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.age++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

也可实现上述效果

3）嵌套类型

class Person {
  name: string
  age: number
  gf: Person

  constructor(name: string, age: number, gf?: Person) {
    this.name = name
    this.age = age
    this.gf = gf
  }
}

@Entry
@Component
struct StatePage2 {
  @State p: Person = new Person('Jack', 21, new Person('Rose', 20))

  build() {
    Column() {
      // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
      Text(`${this.p.name} : ${this.p.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.age++
        })

      Text(`${this.p.gf.name} : ${this.p.gf.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.gf.age++
        })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)

  }
}

效果图：

只有点击Jack的年龄才有反应，点击Rose的年龄则没有。但是Rose的年龄确实改变了，在点击Jack的年龄后重新渲染页面才显示出来。

4）数组

增、删、重新赋值数组可以触发重新渲染

class Person {
  name: string
  age: number
  gf: Person

  constructor(name: string, age: number, gf?: Person) {
    this.name = name
    this.age = age
    this.gf = gf
  }
}

@Entry
@Component
struct StatePage2 {
  idx: number = 1
  @State p: Person = new Person('Jack', 21)
  @State friends: Person[] = [
    new Person('Mike', 22),
    new Person('Tom', 23)
  ]

  build() {
    Column() {
      // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
      Text(`${this.p.name} : ${this.p.age}`)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .onClick(() => {
          this.p.age++
        })
      Button('add friends')
        .onClick(() => {
          // push 向数组中添加新元素
          this.friends.push(new Person('朋友' + this.idx++, 20))
        })
      Text('=friends=')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
      ForEach(
        this.friends,
        (p, index) => {
          Row() {
            Text(`${p.name} : ${p.age}`)
              .fontSize(30)
              .onClick(() => {
                // 如果是p.age++，不是修改数组元素，是对象内的属性变更，无法触发重新渲染
                this.friends[index] = new Person(p.name, p.age + 1)
              })
            Button('delete')
              .onClick(() => {
                // 从当前角标位置开始剔除，剔除1个
                this.friends.splice(index, 1)
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceAround)
        }

      )

    }
    .width('100%')
    .height('100%')
    .padding(20)

  }
}

效果图：

3.任务管理案例

1）效果图

2）框架

// 任务类 ———— 一般是放在单独的文件中然后导入
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[] = []

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

      // 2.新增任务按钮

      // 3.任务列表

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

  }
}

3）任务进度卡片

代码：

// 1.任务进度卡片
      Row() {
        Text('任务进度')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        // Stack 堆叠容器
        Stack() {
          // 进度条
          Progress({
            value: this.finishTask,
            total: this.totalTask,
            type: ProgressType.Ring
          })
            .width(100)
          Row() {
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor(Color.Blue)
            Text(' / ' + this.totalTask.toString())
              .fontSize(24)
          }

        }

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

效果图：

 

4）新增任务按钮

// 2.新增任务按钮
      Button('新增任务')
        .width(200)
        .onClick(() => {
          // 1)新增任务数据
          this.tasks.push(new Task())
          // 2)更新任务总数量
          this.totalTask = this.tasks.length
        })

5）任务列表

// 3.任务列表
      ForEach(
        this.tasks,
        (item: Task, index) => {
          Row() {
            Text(item.name)
              .fontSize(20)
            // 多选框工具
            Checkbox()
              .select(item.finished)
              .onChange(val => {
                // 1)更新当前任务状态
                item.finished = val
                // 2)更新已完成任务数量
                this.finishTask = this.tasks.filter(item => item.finished).length
              })
          }
          .card()
        }
      )

6)优化代码

我们将更新抽取出来，写成一个函数

handleTaskChange() {
    // 1.更新任务总数量
    this.totalTask = this.tasks.length
    // 2.更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length

  }

 7)将任务列表写进List容器中

// 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()
              .layoutWeight(1)
              .justifyContent(FlexAlign.SpaceBetween)
            }
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

8）编写功能左滑删除按钮

在media中添加删除图标

 

创建局部自定义组件删除按钮

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

ListItem添加左滑组件

.swipeAction({ end: this.DeleteButton(index) })

9）完整代码

// 任务类 ———— 一般是放在单独的文件中然后导入
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 堆叠容器
        Stack() {
          // 进度条
          Progress({
            value: this.finishTask,
            total: this.totalTask,
            type: ProgressType.Ring
          })
            .width(100)
          Row() {
            Text(this.finishTask.toString())
              .fontSize(24)
              .fontColor(Color.Blue)
            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()
              .layoutWeight(1)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

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

  }

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

效果图：

二、@Prop和@Link

上面的任务管理案例代码可读性较差，我们可以通过构建自定义组件来使代码可读性提高。而当父子组件之间需要数据同步时，可使用@Prop和@Link装饰器

	@Prop	@Link
同步类型	单向同步	双向同步
允许装饰的变量类型	1.@Prop只支持string、number、boolean、enum类型 2.父组件对象类型，子组件是对象属性 3.不可以是数组、any	1.父子类型一致：string、number、boolean、enum、object、class，以及他们的数组 2.数组中元素增、删、替换会引起刷新 3.嵌套类型以及数组中的对象属性无法触发试图更新
初始化方式	不允许子组件初始化	父组件传递，禁止子组件初始化

1.同步类型

事例代码：

// 任务类 ———— 一般是放在单独的文件中然后导入
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

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

      // 2.任务列表
      TaskList({ finishTask: $finishTask, totalTask: $totalTask })

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

  }
}


@Component
struct TaskStatistics {
  @Prop finishTask: number
  @Prop totalTask: number

  build() {
    // 1.任务进度卡片
    Row() {
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Stack 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor(Color.Blue)
          Text(' / ' + this.totalTask.toString())
            .fontSize(24)
        }

      }

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

@Component
struct TaskList {
  // 总任务数
  @Link totalTask: number
  //已完成任务数
  @Link finishTask: number
  // 任务数组
  @State tasks: Task[] = []

  handleTaskChange() {
    // 1.更新任务总数量
    this.totalTask = this.tasks.length
    // 2.更新已完成任务数量
    this.finishTask = this.tasks.filter(item => item.finished).length

  }

  build() {
    Column() {
      // 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()
              .layoutWeight(1)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

    }

  }

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

2. 允许装饰的变量类型

将案例再次进行改造

// 任务类 ———— 一般是放在单独的文件中然后导入
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')
}

class StatInfo {
  // 总任务数
  totalTask: number = 0
  //已完成任务数
  finishTask: number = 0
}


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

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

      // 2.任务列表
      TaskList({ stat: $stat })

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

  }
}


@Component
struct TaskStatistics {
  @Prop finishTask: number
  @Prop totalTask: number

  build() {
    // 1.任务进度卡片
    Row() {
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Stack 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.finishTask,
          total: this.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        Row() {
          Text(this.finishTask.toString())
            .fontSize(24)
            .fontColor(Color.Blue)
          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() {
      // 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()
              .layoutWeight(1)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

    }

  }

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

三、@Provide和@Consume

@Provide和@Consume可以跨组件提供类似于@State和@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 })
}

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

class StatInfo {
  // 总任务数
  totalTask: number = 0
  //已完成任务数
  finishTask: number = 0
}


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

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

      // 2.任务列表
      TaskList()

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

  }
}


@Component
struct TaskStatistics {
  // 统计信息
  @Consume stat: StatInfo

  build() {
    // 1.任务进度卡片
    Row() {
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Stack 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.stat.finishTask,
          total: this.stat.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        Row() {
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor(Color.Blue)
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }

      }

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

@Component
struct TaskList {
  // 统计信息
  @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() {
      // 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()
              .layoutWeight(1)
              .justifyContent(FlexAlign.SpaceBetween)
            }
            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

    }

  }

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

四、@Observed和@ObjectLink

@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 })
}

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

class StatInfo {
  // 总任务数
  totalTask: number = 0
  //已完成任务数
  finishTask: number = 0
}


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

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

      // 2.任务列表
      TaskList()

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

  }
}


@Component
struct TaskStatistics {
  // 统计信息
  @Consume stat: StatInfo

  build() {
    // 1.任务进度卡片
    Row() {
      Text('任务进度')
        .fontSize(30)
        .fontWeight(FontWeight.Bold)
      // Stack 堆叠容器
      Stack() {
        // 进度条
        Progress({
          value: this.stat.finishTask,
          total: this.stat.totalTask,
          type: ProgressType.Ring
        })
          .width(100)
        Row() {
          Text(this.stat.finishTask.toString())
            .fontSize(24)
            .fontColor(Color.Blue)
          Text(' / ' + this.stat.totalTask.toString())
            .fontSize(24)
        }

      }

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

@Component
struct TaskList {
  // 统计信息
  @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() {
      // 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() {
              // 传方法handleTaskChange不加() 调用方法加()  bind把父组件的this绑定到方法上
              TaskItem({ item: item, onTaskChange: this.handleTaskChange.bind(this) })
            }
            .swipeAction({ end: this.DeleteButton(index) })
          }
        )
      }
      .width('100%')
      .alignListItem(ListItemAlign.Center)

    }

  }

  @Builder DeleteButton(index: number) {
    Button() {
      Image($r('app.media.ic_public_list_deleted'))
        .fillColor(Color.White)
        .width(20)
    }
    .width(40)
    .height(40)
    .type(ButtonType.Circle)
    .backgroundColor(Color.Red)
    .margin(5)
    .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)
          .finishedTask()
      } else {
        Text(this.item.name)
          .fontSize(20)
      }
      // 多选框工具
      Checkbox()
        .select(this.item.finished)
        .onChange(val => {
          // 1)更新当前任务状态
          this.item.finished = val
          // 2)更新
          this.onTaskChange()
        })
    }
    .card()
    .layoutWeight(1)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}