devbox
weixin_40725706
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：weixin_40725706 | 2024-03-29 04:06:38

赞

踩

鸿蒙状态管理

在声明式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

  1. @Entry
  2. @Component
  3. struct StatePage {
  4.   @State name: string = 'Jack'
  5.   @State age: number = 21
  6.  
  7.   build() {
  8.     Column() {
  9.       // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
  10.       Text(`${this.name} : ${this.age}`)
  11.         .fontSize(50)
  12.         .fontWeight(FontWeight.Bold)
  13.         .onClick(() => {
  14.           this.age++
  15.         })
  16.     }
  17.     .width('100%')
  18.     .height('100%')
  19.     .justifyContent(FlexAlign.Center)
  20.   }
  21. }

此代码实现的界面如下：

点击前：

点击后数字加1。

2）复杂类型，如class

  1. class Person {
  2.   name: string
  3.   age: number
  4.  
  5.   constructor(name: string, age: number) {
  6.     this.name = name
  7.     this.age = age
  8.   }
  9. }
  10.  
  11. @Entry
  12. @Component
  13. struct StatePage2 {
  14.   @State p: Person = new Person('Jack', 21)
  15.  
  16.   build() {
  17.     Column() {
  18.       // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
  19.       Text(`${this.p.name} : ${this.p.age}`)
  20.         .fontSize(50)
  21.         .fontWeight(FontWeight.Bold)
  22.         .onClick(() => {
  23.           this.p.age++
  24.         })
  25.     }
  26.     .width('100%')
  27.     .height('100%')
  28.     .justifyContent(FlexAlign.Center)
  29.   }
  30. }

也可实现上述效果

3）嵌套类型

  1. class Person {
  2.   name: string
  3.   age: number
  4.   gf: Person
  5.  
  6.   constructor(name: string, age: number, gf?: Person) {
  7.     this.name = name
  8.     this.age = age
  9.     this.gf = gf
  10.   }
  11. }
  12.  
  13. @Entry
  14. @Component
  15. struct StatePage2 {
  16.   @State p: Person = new Person('Jack', 21, new Person('Rose', 20))
  17.  
  18.   build() {
  19.     Column() {
  20.       // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
  21.       Text(`${this.p.name} : ${this.p.age}`)
  22.         .fontSize(50)
  23.         .fontWeight(FontWeight.Bold)
  24.         .onClick(() => {
  25.           this.p.age++
  26.         })
  27.  
  28.       Text(`${this.p.gf.name} : ${this.p.gf.age}`)
  29.         .fontSize(50)
  30.         .fontWeight(FontWeight.Bold)
  31.         .onClick(() => {
  32.           this.p.gf.age++
  33.         })
  34.     }
  35.     .width('100%')
  36.     .height('100%')
  37.     .justifyContent(FlexAlign.Center)
  38.  
  39.   }
  40. }

效果图：

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

4）数组

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

  1. class Person {
  2.   name: string
  3.   age: number
  4.   gf: Person
  5.  
  6.   constructor(name: string, age: number, gf?: Person) {
  7.     this.name = name
  8.     this.age = age
  9.     this.gf = gf
  10.   }
  11. }
  12.  
  13. @Entry
  14. @Component
  15. struct StatePage2 {
  16.   idx: number = 1
  17.   @State p: Person = new Person('Jack', 21)
  18.   @State friends: Person[] = [
  19.     new Person('Mike', 22),
  20.     new Person('Tom', 23)
  21.   ]
  22.  
  23.   build() {
  24.     Column() {
  25.       // 要引用两个文本，使用``，在键盘Esc下面 Tab上面
  26.       Text(`${this.p.name} : ${this.p.age}`)
  27.         .fontSize(50)
  28.         .fontWeight(FontWeight.Bold)
  29.         .onClick(() => {
  30.           this.p.age++
  31.         })
  32.       Button('add friends')
  33.         .onClick(() => {
  34.           // push 向数组中添加新元素
  35.           this.friends.push(new Person('朋友' + this.idx++, 20))
  36.         })
  37.       Text('=friends=')
  38.         .fontSize(50)
  39.         .fontWeight(FontWeight.Bold)
  40.       ForEach(
  41.         this.friends,
  42.         (p, index) => {
  43.           Row() {
  44.             Text(`${p.name} : ${p.age}`)
  45.               .fontSize(30)
  46.               .onClick(() => {
  47.                 // 如果是p.age++，不是修改数组元素，是对象内的属性变更，无法触发重新渲染
  48.                 this.friends[index] = new Person(p.name, p.age + 1)
  49.               })
  50.             Button('delete')
  51.               .onClick(() => {
  52.                 // 从当前角标位置开始剔除，剔除1个
  53.                 this.friends.splice(index, 1)
  54.               })
  55.           }
  56.           .width('100%')
  57.           .justifyContent(FlexAlign.SpaceAround)
  58.         }
  59.  
  60.       )
  61.  
  62.     }
  63.     .width('100%')
  64.     .height('100%')
  65.     .padding(20)
  66.  
  67.   }
  68. }

效果图：

3.任务管理案例

1）效果图

2）框架

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. class Task {
  3.   // 静态变量，类中所有对象共享
  4.   static id: number = 1
  5.   // 任务名称
  6.   name: string = `任务${Task.id++}`
  7.   // 任务状态：是否完成
  8.   finished: boolean = false
  9. }
  10.  
  11. // 统一的卡片样式
  12. @Styles function card() {
  13.   .width("95%")
  14.   .padding(20)
  15.   .backgroundColor(Color.White)
  16.   .borderRadius(15)
  17.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  18. }
  19.  
  20. // 任务完成样式
  21. @Extend(Text) function finishedTask() {
  22.   .decoration({ type: TextDecorationType.LineThrough })
  23.   .fontColor('#B1B2B1')
  24. }
  25.  
  26.  
  27. @Entry
  28. @Component
  29. struct PropPage {
  30.   // 总任务数
  31.   @State totalTask: number = 0
  32.   //已完成任务数
  33.   @State finishTask: number = 0
  34.   // 任务数组
  35.   @State tasks: Task[] = []
  36.  
  37.   build() {
  38.     Column({ space: 10 }) {
  39.       // 1.任务进度卡片
  40.  
  41.       // 2.新增任务按钮
  42.  
  43.       // 3.任务列表
  44.  
  45.     }
  46.     .width('100%')
  47.     .height('100%')
  48.     .backgroundColor('#F1F2F3')
  49.  
  50.   }
  51. }

3）任务进度卡片

代码：

  1. // 1.任务进度卡片
  2.       Row() {
  3.         Text('任务进度')
  4.           .fontSize(30)
  5.           .fontWeight(FontWeight.Bold)
  6.         // Stack 堆叠容器
  7.         Stack() {
  8.           // 进度条
  9.           Progress({
  10.             value: this.finishTask,
  11.             total: this.totalTask,
  12.             type: ProgressType.Ring
  13.           })
  14.             .width(100)
  15.           Row() {
  16.             Text(this.finishTask.toString())
  17.               .fontSize(24)
  18.               .fontColor(Color.Blue)
  19.             Text(' / ' + this.totalTask.toString())
  20.               .fontSize(24)
  21.           }
  22.  
  23.         }
  24.  
  25.       }.card()
  26.       .margin({ top: 20, bottom: 10 })
  27.       .justifyContent(FlexAlign.SpaceEvenly)

效果图：

 

4）新增任务按钮

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

5）任务列表

  1. // 3.任务列表
  2.       ForEach(
  3.         this.tasks,
  4.         (item: Task, index) => {
  5.           Row() {
  6.             Text(item.name)
  7.               .fontSize(20)
  8.             // 多选框工具
  9.             Checkbox()
  10.               .select(item.finished)
  11.               .onChange(val => {
  12.                 // 1)更新当前任务状态
  13.                 item.finished = val
  14.                 // 2)更新已完成任务数量
  15.                 this.finishTask = this.tasks.filter(item => item.finished).length
  16.               })
  17.           }
  18.           .card()
  19.         }
  20.       )

6)优化代码

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

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

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

  1. // 3.任务列表
  2.       List({ space: 10 }) {
  3.         ForEach(
  4.           this.tasks,
  5.           (item: Task, index) => {
  6.             ListItem() {
  7.               Row() {
  8.                 Text(item.name)
  9.                   .fontSize(20)
  10.                 // 多选框工具
  11.                 Checkbox()
  12.                   .select(item.finished)
  13.                   .onChange(val => {
  14.                     // 1)更新当前任务状态
  15.                     item.finished = val
  16.                     // 2)更新
  17.                     this.handleTaskChange()
  18.                   })
  19.               }
  20.               .card()
  21.               .layoutWeight(1)
  22.               .justifyContent(FlexAlign.SpaceBetween)
  23.             }
  24.           }
  25.         )
  26.       }
  27.       .width('100%')
  28.       .alignListItem(ListItemAlign.Center)

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

在media中添加删除图标

 

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

  1. @Builder DeleteButton(index: number) {
  2.     Button() {
  3.       Image($r('app.media.ic_public_list_deleted'))
  4.         .fillColor(Color.White)
  5.         .width(20)
  6.     }
  7.     .width(40)
  8.     .height(40)
  9.     .type(ButtonType.Circle)
  10.     .backgroundColor(Color.Red)
  11.     .margin(5)
  12.     .onClick(() => {
  13.       this.tasks.splice(index, 1)
  14.       this.handleTaskChange()
  15.     })
  16.   }

ListItem添加左滑组件

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

9）完整代码

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. class Task {
  3.   // 静态变量，类中所有对象共享
  4.   static id: number = 1
  5.   // 任务名称
  6.   name: string = `任务${Task.id++}`
  7.   // 任务状态：是否完成
  8.   finished: boolean = false
  9. }
  10.  
  11. // 统一的卡片样式
  12. @Styles function card() {
  13.   .width("95%")
  14.   .padding(20)
  15.   .backgroundColor(Color.White)
  16.   .borderRadius(15)
  17.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  18. }
  19.  
  20. // 任务完成样式
  21. @Extend(Text) function finishedTask() {
  22.   .decoration({ type: TextDecorationType.LineThrough })
  23.   .fontColor('#B1B2B1')
  24. }
  25.  
  26.  
  27. @Entry
  28. @Component
  29. struct PropPage {
  30.   // 总任务数
  31.   @State totalTask: number = 0
  32.   //已完成任务数
  33.   @State finishTask: number = 0
  34.   // 任务数组
  35.   @State tasks: Task[] = []
  36.  
  37.   handleTaskChange() {
  38.     // 1.更新任务总数量
  39.     this.totalTask = this.tasks.length
  40.     // 2.更新已完成任务数量
  41.     this.finishTask = this.tasks.filter(item => item.finished).length
  42.  
  43.   }
  44.  
  45.   build() {
  46.     Column({ space: 10 }) {
  47.       // 1.任务进度卡片
  48.       Row() {
  49.         Text('任务进度')
  50.           .fontSize(30)
  51.           .fontWeight(FontWeight.Bold)
  52.         // Stack 堆叠容器
  53.         Stack() {
  54.           // 进度条
  55.           Progress({
  56.             value: this.finishTask,
  57.             total: this.totalTask,
  58.             type: ProgressType.Ring
  59.           })
  60.             .width(100)
  61.           Row() {
  62.             Text(this.finishTask.toString())
  63.               .fontSize(24)
  64.               .fontColor(Color.Blue)
  65.             Text(' / ' + this.totalTask.toString())
  66.               .fontSize(24)
  67.           }
  68.  
  69.         }
  70.  
  71.       }.card()
  72.       .margin({ top: 20, bottom: 10 })
  73.       .justifyContent(FlexAlign.SpaceEvenly)
  74.  
  75.       // 2.新增任务按钮
  76.       Button('新增任务')
  77.         .width(200)
  78.         .onClick(() => {
  79.           // 1)新增任务数据
  80.           this.tasks.push(new Task())
  81.           // 2)更新
  82.           this.handleTaskChange()
  83.         })
  84.  
  85.       // 3.任务列表
  86.       List({ space: 10 }) {
  87.         ForEach(
  88.           this.tasks,
  89.           (item: Task, index) => {
  90.             ListItem() {
  91.               Row() {
  92.                 Text(item.name)
  93.                   .fontSize(20)
  94.                 // 多选框工具
  95.                 Checkbox()
  96.                   .select(item.finished)
  97.                   .onChange(val => {
  98.                     // 1)更新当前任务状态
  99.                     item.finished = val
  100.                     // 2)更新
  101.                     this.handleTaskChange()
  102.                   })
  103.               }
  104.               .card()
  105.               .layoutWeight(1)
  106.               .justifyContent(FlexAlign.SpaceBetween)
  107.             }
  108.             .swipeAction({ end: this.DeleteButton(index) })
  109.           }
  110.         )
  111.       }
  112.       .width('100%')
  113.       .alignListItem(ListItemAlign.Center)
  114.  
  115.     }
  116.     .width('100%')
  117.     .height('100%')
  118.     .backgroundColor('#F1F2F3')
  119.  
  120.   }
  121.  
  122.   @Builder DeleteButton(index: number) {
  123.     Button() {
  124.       Image($r('app.media.ic_public_list_deleted'))
  125.         .fillColor(Color.White)
  126.         .width(20)
  127.     }
  128.     .width(40)
  129.     .height(40)
  130.     .type(ButtonType.Circle)
  131.     .backgroundColor(Color.Red)
  132.     .margin(5)
  133.     .onClick(() => {
  134.       this.tasks.splice(index, 1)
  135.       this.handleTaskChange()
  136.     })
  137.   }
  138. }

效果图：

二、@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.同步类型

事例代码：

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. class Task {
  3.   // 静态变量，类中所有对象共享
  4.   static id: number = 1
  5.   // 任务名称
  6.   name: string = `任务${Task.id++}`
  7.   // 任务状态：是否完成
  8.   finished: boolean = false
  9. }
  10.  
  11. // 统一的卡片样式
  12. @Styles function card() {
  13.   .width("95%")
  14.   .padding(20)
  15.   .backgroundColor(Color.White)
  16.   .borderRadius(15)
  17.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  18. }
  19.  
  20. // 任务完成样式
  21. @Extend(Text) function finishedTask() {
  22.   .decoration({ type: TextDecorationType.LineThrough })
  23.   .fontColor('#B1B2B1')
  24. }
  25.  
  26.  
  27. @Entry
  28. @Component
  29. struct PropPage {
  30.   // 总任务数
  31.   @State totalTask: number = 0
  32.   //已完成任务数
  33.   @State finishTask: number = 0
  34.  
  35.   build() {
  36.     Column({ space: 10 }) {
  37.       // 1.任务进度卡片
  38.       TaskStatistics({ finishTask: this.finishTask, totalTask: this.totalTask })
  39.  
  40.       // 2.任务列表
  41.       TaskList({ finishTask: $finishTask, totalTask: $totalTask })
  42.  
  43.     }
  44.     .width('100%')
  45.     .height('100%')
  46.     .backgroundColor('#F1F2F3')
  47.  
  48.   }
  49. }
  50.  
  51.  
  52. @Component
  53. struct TaskStatistics {
  54.   @Prop finishTask: number
  55.   @Prop totalTask: number
  56.  
  57.   build() {
  58.     // 1.任务进度卡片
  59.     Row() {
  60.       Text('任务进度')
  61.         .fontSize(30)
  62.         .fontWeight(FontWeight.Bold)
  63.       // Stack 堆叠容器
  64.       Stack() {
  65.         // 进度条
  66.         Progress({
  67.           value: this.finishTask,
  68.           total: this.totalTask,
  69.           type: ProgressType.Ring
  70.         })
  71.           .width(100)
  72.         Row() {
  73.           Text(this.finishTask.toString())
  74.             .fontSize(24)
  75.             .fontColor(Color.Blue)
  76.           Text(' / ' + this.totalTask.toString())
  77.             .fontSize(24)
  78.         }
  79.  
  80.       }
  81.  
  82.     }.card()
  83.     .margin({ top: 20, bottom: 10 })
  84.     .justifyContent(FlexAlign.SpaceEvenly)
  85.   }
  86. }
  87.  
  88. @Component
  89. struct TaskList {
  90.   // 总任务数
  91.   @Link totalTask: number
  92.   //已完成任务数
  93.   @Link finishTask: number
  94.   // 任务数组
  95.   @State tasks: Task[] = []
  96.  
  97.   handleTaskChange() {
  98.     // 1.更新任务总数量
  99.     this.totalTask = this.tasks.length
  100.     // 2.更新已完成任务数量
  101.     this.finishTask = this.tasks.filter(item => item.finished).length
  102.  
  103.   }
  104.  
  105.   build() {
  106.     Column() {
  107.       // 2.新增任务按钮
  108.       Button('新增任务')
  109.         .width(200)
  110.         .onClick(() => {
  111.           // 1)新增任务数据
  112.           this.tasks.push(new Task())
  113.           // 2)更新
  114.           this.handleTaskChange()
  115.         })
  116.  
  117.       // 3.任务列表
  118.       List({ space: 10 }) {
  119.         ForEach(
  120.           this.tasks,
  121.           (item: Task, index) => {
  122.             ListItem() {
  123.               Row() {
  124.                 Text(item.name)
  125.                   .fontSize(20)
  126.                 // 多选框工具
  127.                 Checkbox()
  128.                   .select(item.finished)
  129.                   .onChange(val => {
  130.                     // 1)更新当前任务状态
  131.                     item.finished = val
  132.                     // 2)更新
  133.                     this.handleTaskChange()
  134.                   })
  135.               }
  136.               .card()
  137.               .layoutWeight(1)
  138.               .justifyContent(FlexAlign.SpaceBetween)
  139.             }
  140.             .swipeAction({ end: this.DeleteButton(index) })
  141.           }
  142.         )
  143.       }
  144.       .width('100%')
  145.       .alignListItem(ListItemAlign.Center)
  146.  
  147.     }
  148.  
  149.   }
  150.  
  151.   @Builder DeleteButton(index: number) {
  152.     Button() {
  153.       Image($r('app.media.ic_public_list_deleted'))
  154.         .fillColor(Color.White)
  155.         .width(20)
  156.     }
  157.     .width(40)
  158.     .height(40)
  159.     .type(ButtonType.Circle)
  160.     .backgroundColor(Color.Red)
  161.     .margin(5)
  162.     .onClick(() => {
  163.       this.tasks.splice(index, 1)
  164.       this.handleTaskChange()
  165.     })
  166.   }
  167. }

2. 允许装饰的变量类型

将案例再次进行改造

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. class Task {
  3.   // 静态变量，类中所有对象共享
  4.   static id: number = 1
  5.   // 任务名称
  6.   name: string = `任务${Task.id++}`
  7.   // 任务状态：是否完成
  8.   finished: boolean = false
  9. }
  10.  
  11. // 统一的卡片样式
  12. @Styles function card() {
  13.   .width("95%")
  14.   .padding(20)
  15.   .backgroundColor(Color.White)
  16.   .borderRadius(15)
  17.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  18. }
  19.  
  20. // 任务完成样式
  21. @Extend(Text) function finishedTask() {
  22.   .decoration({ type: TextDecorationType.LineThrough })
  23.   .fontColor('#B1B2B1')
  24. }
  25.  
  26. class StatInfo {
  27.   // 总任务数
  28.   totalTask: number = 0
  29.   //已完成任务数
  30.   finishTask: number = 0
  31. }
  32.  
  33.  
  34. @Entry
  35. @Component
  36. struct PropPage {
  37.   // 统计信息
  38.   @State stat: StatInfo = new StatInfo()
  39.  
  40.   build() {
  41.     Column({ space: 10 }) {
  42.       // 1.任务进度卡片
  43.       TaskStatistics({ finishTask: this.stat.finishTask, totalTask: this.stat.totalTask })
  44.  
  45.       // 2.任务列表
  46.       TaskList({ stat: $stat })
  47.  
  48.     }
  49.     .width('100%')
  50.     .height('100%')
  51.     .backgroundColor('#F1F2F3')
  52.  
  53.   }
  54. }
  55.  
  56.  
  57. @Component
  58. struct TaskStatistics {
  59.   @Prop finishTask: number
  60.   @Prop totalTask: number
  61.  
  62.   build() {
  63.     // 1.任务进度卡片
  64.     Row() {
  65.       Text('任务进度')
  66.         .fontSize(30)
  67.         .fontWeight(FontWeight.Bold)
  68.       // Stack 堆叠容器
  69.       Stack() {
  70.         // 进度条
  71.         Progress({
  72.           value: this.finishTask,
  73.           total: this.totalTask,
  74.           type: ProgressType.Ring
  75.         })
  76.           .width(100)
  77.         Row() {
  78.           Text(this.finishTask.toString())
  79.             .fontSize(24)
  80.             .fontColor(Color.Blue)
  81.           Text(' / ' + this.totalTask.toString())
  82.             .fontSize(24)
  83.         }
  84.  
  85.       }
  86.  
  87.     }.card()
  88.     .margin({ top: 20, bottom: 10 })
  89.     .justifyContent(FlexAlign.SpaceEvenly)
  90.   }
  91. }
  92.  
  93. @Component
  94. struct TaskList {
  95.   // 统计信息
  96.   @Link stat: StatInfo
  97.   // 任务数组
  98.   @State tasks: Task[] = []
  99.  
  100.   handleTaskChange() {
  101.     // 1.更新任务总数量
  102.     this.stat.totalTask = this.tasks.length
  103.     // 2.更新已完成任务数量
  104.     this.stat.finishTask = this.tasks.filter(item => item.finished).length
  105.  
  106.   }
  107.  
  108.   build() {
  109.     Column() {
  110.       // 2.新增任务按钮
  111.       Button('新增任务')
  112.         .width(200)
  113.         .onClick(() => {
  114.           // 1)新增任务数据
  115.           this.tasks.push(new Task())
  116.           // 2)更新
  117.           this.handleTaskChange()
  118.         })
  119.  
  120.       // 3.任务列表
  121.       List({ space: 10 }) {
  122.         ForEach(
  123.           this.tasks,
  124.           (item: Task, index) => {
  125.             ListItem() {
  126.               Row() {
  127.                 Text(item.name)
  128.                   .fontSize(20)
  129.                 // 多选框工具
  130.                 Checkbox()
  131.                   .select(item.finished)
  132.                   .onChange(val => {
  133.                     // 1)更新当前任务状态
  134.                     item.finished = val
  135.                     // 2)更新
  136.                     this.handleTaskChange()
  137.                   })
  138.               }
  139.               .card()
  140.               .layoutWeight(1)
  141.               .justifyContent(FlexAlign.SpaceBetween)
  142.             }
  143.             .swipeAction({ end: this.DeleteButton(index) })
  144.           }
  145.         )
  146.       }
  147.       .width('100%')
  148.       .alignListItem(ListItemAlign.Center)
  149.  
  150.     }
  151.  
  152.   }
  153.  
  154.   @Builder DeleteButton(index: number) {
  155.     Button() {
  156.       Image($r('app.media.ic_public_list_deleted'))
  157.         .fillColor(Color.White)
  158.         .width(20)
  159.     }
  160.     .width(40)
  161.     .height(40)
  162.     .type(ButtonType.Circle)
  163.     .backgroundColor(Color.Red)
  164.     .margin(5)
  165.     .onClick(() => {
  166.       this.tasks.splice(index, 1)
  167.       this.handleTaskChange()
  168.     })
  169.   }
  170. }

三、@Provide和@Consume

@Provide和@Consume可以跨组件提供类似于@State和@Link的双向同步，不需要显示传参，自动传递。刚方便，但是资源损耗大。

案例改造代码：

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. class Task {
  3.   // 静态变量，类中所有对象共享
  4.   static id: number = 1
  5.   // 任务名称
  6.   name: string = `任务${Task.id++}`
  7.   // 任务状态：是否完成
  8.   finished: boolean = false
  9. }
  10.  
  11. // 统一的卡片样式
  12. @Styles function card() {
  13.   .width("95%")
  14.   .padding(20)
  15.   .backgroundColor(Color.White)
  16.   .borderRadius(15)
  17.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  18. }
  19.  
  20. // 任务完成样式
  21. @Extend(Text) function finishedTask() {
  22.   .decoration({ type: TextDecorationType.LineThrough })
  23.   .fontColor('#B1B2B1')
  24. }
  25.  
  26. class StatInfo {
  27.   // 总任务数
  28.   totalTask: number = 0
  29.   //已完成任务数
  30.   finishTask: number = 0
  31. }
  32.  
  33.  
  34. @Entry
  35. @Component
  36. struct PropPage {
  37.   // 统计信息
  38.   @Provide stat: StatInfo = new StatInfo()
  39.  
  40.   build() {
  41.     Column({ space: 10 }) {
  42.       // 1.任务进度卡片
  43.       TaskStatistics()
  44.  
  45.       // 2.任务列表
  46.       TaskList()
  47.  
  48.     }
  49.     .width('100%')
  50.     .height('100%')
  51.     .backgroundColor('#F1F2F3')
  52.  
  53.   }
  54. }
  55.  
  56.  
  57. @Component
  58. struct TaskStatistics {
  59.   // 统计信息
  60.   @Consume stat: StatInfo
  61.  
  62.   build() {
  63.     // 1.任务进度卡片
  64.     Row() {
  65.       Text('任务进度')
  66.         .fontSize(30)
  67.         .fontWeight(FontWeight.Bold)
  68.       // Stack 堆叠容器
  69.       Stack() {
  70.         // 进度条
  71.         Progress({
  72.           value: this.stat.finishTask,
  73.           total: this.stat.totalTask,
  74.           type: ProgressType.Ring
  75.         })
  76.           .width(100)
  77.         Row() {
  78.           Text(this.stat.finishTask.toString())
  79.             .fontSize(24)
  80.             .fontColor(Color.Blue)
  81.           Text(' / ' + this.stat.totalTask.toString())
  82.             .fontSize(24)
  83.         }
  84.  
  85.       }
  86.  
  87.     }.card()
  88.     .margin({ top: 20, bottom: 10 })
  89.     .justifyContent(FlexAlign.SpaceEvenly)
  90.   }
  91. }
  92.  
  93. @Component
  94. struct TaskList {
  95.   // 统计信息
  96.   @Consume stat: StatInfo
  97.   // 任务数组
  98.   @State tasks: Task[] = []
  99.  
  100.   handleTaskChange() {
  101.     // 1.更新任务总数量
  102.     this.stat.totalTask = this.tasks.length
  103.     // 2.更新已完成任务数量
  104.     this.stat.finishTask = this.tasks.filter(item => item.finished).length
  105.  
  106.   }
  107.  
  108.   build() {
  109.     Column() {
  110.       // 2.新增任务按钮
  111.       Button('新增任务')
  112.         .width(200)
  113.         .onClick(() => {
  114.           // 1)新增任务数据
  115.           this.tasks.push(new Task())
  116.           // 2)更新
  117.           this.handleTaskChange()
  118.         })
  119.  
  120.       // 3.任务列表
  121.       List({ space: 10 }) {
  122.         ForEach(
  123.           this.tasks,
  124.           (item: Task, index) => {
  125.             ListItem() {
  126.               Row() {
  127.                 Text(item.name)
  128.                   .fontSize(20)
  129.                 // 多选框工具
  130.                 Checkbox()
  131.                   .select(item.finished)
  132.                   .onChange(val => {
  133.                     // 1)更新当前任务状态
  134.                     item.finished = val
  135.                     // 2)更新
  136.                     this.handleTaskChange()
  137.                   })
  138.               }
  139.               .card()
  140.               .layoutWeight(1)
  141.               .justifyContent(FlexAlign.SpaceBetween)
  142.             }
  143.             .swipeAction({ end: this.DeleteButton(index) })
  144.           }
  145.         )
  146.       }
  147.       .width('100%')
  148.       .alignListItem(ListItemAlign.Center)
  149.  
  150.     }
  151.  
  152.   }
  153.  
  154.   @Builder DeleteButton(index: number) {
  155.     Button() {
  156.       Image($r('app.media.ic_public_list_deleted'))
  157.         .fillColor(Color.White)
  158.         .width(20)
  159.     }
  160.     .width(40)
  161.     .height(40)
  162.     .type(ButtonType.Circle)
  163.     .backgroundColor(Color.Red)
  164.     .margin(5)
  165.     .onClick(() => {
  166.       this.tasks.splice(index, 1)
  167.       this.handleTaskChange()
  168.     })
  169.   }
  170. }

四、@Observed和@ObjectLink

@Observed和@ObjectLink装饰器用于涉及嵌套对象或数组元素为对象的场景中进行双向数据同步

  1. // 任务类 ———— 一般是放在单独的文件中然后导入
  2. @Observed
  3. class Task {
  4.   // 静态变量，类中所有对象共享
  5.   static id: number = 1
  6.   // 任务名称
  7.   name: string = `任务${Task.id++}`
  8.   // 任务状态：是否完成
  9.   finished: boolean = false
  10. }
  11.  
  12. // 统一的卡片样式
  13. @Styles function card() {
  14.   .width("95%")
  15.   .padding(20)
  16.   .backgroundColor(Color.White)
  17.   .borderRadius(15)
  18.   .shadow({ radius: 6, color: '#1F000000', offsetX: 2, offsetY: 4 })
  19. }
  20.  
  21. // 任务完成样式
  22. @Extend(Text) function finishedTask() {
  23.   .decoration({ type: TextDecorationType.LineThrough })
  24.   .fontColor('#B1B2B1')
  25. }
  26.  
  27. class StatInfo {
  28.   // 总任务数
  29.   totalTask: number = 0
  30.   //已完成任务数
  31.   finishTask: number = 0
  32. }
  33.  
  34.  
  35. @Entry
  36. @Component
  37. struct PropPage {
  38.   // 统计信息
  39.   @Provide stat: StatInfo = new StatInfo()
  40.  
  41.   build() {
  42.     Column({ space: 10 }) {
  43.       // 1.任务进度卡片
  44.       TaskStatistics()
  45.  
  46.       // 2.任务列表
  47.       TaskList()
  48.  
  49.     }
  50.     .width('100%')
  51.     .height('100%')
  52.     .backgroundColor('#F1F2F3')
  53.  
  54.   }
  55. }
  56.  
  57.  
  58. @Component
  59. struct TaskStatistics {
  60.   // 统计信息
  61.   @Consume stat: StatInfo
  62.  
  63.   build() {
  64.     // 1.任务进度卡片
  65.     Row() {
  66.       Text('任务进度')
  67.         .fontSize(30)
  68.         .fontWeight(FontWeight.Bold)
  69.       // Stack 堆叠容器
  70.       Stack() {
  71.         // 进度条
  72.         Progress({
  73.           value: this.stat.finishTask,
  74.           total: this.stat.totalTask,
  75.           type: ProgressType.Ring
  76.         })
  77.           .width(100)
  78.         Row() {
  79.           Text(this.stat.finishTask.toString())
  80.             .fontSize(24)
  81.             .fontColor(Color.Blue)
  82.           Text(' / ' + this.stat.totalTask.toString())
  83.             .fontSize(24)
  84.         }
  85.  
  86.       }
  87.  
  88.     }.card()
  89.     .margin({ top: 20, bottom: 10 })
  90.     .justifyContent(FlexAlign.SpaceEvenly)
  91.   }
  92. }
  93.  
  94. @Component
  95. struct TaskList {
  96.   // 统计信息
  97.   @Consume stat: StatInfo
  98.   // 任务数组
  99.   @State tasks: Task[] = []
  100.  
  101.   handleTaskChange() {
  102.     // 1.更新任务总数量
  103.     this.stat.totalTask = this.tasks.length
  104.     // 2.更新已完成任务数量
  105.     this.stat.finishTask = this.tasks.filter(item => item.finished).length
  106.  
  107.   }
  108.  
  109.   build() {
  110.     Column() {
  111.       // 2.新增任务按钮
  112.       Button('新增任务')
  113.         .width(200)
  114.         .onClick(() => {
  115.           // 1)新增任务数据
  116.           this.tasks.push(new Task())
  117.           // 2)更新
  118.           this.handleTaskChange()
  119.         })
  120.  
  121.       // 3.任务列表
  122.       List({ space: 10 }) {
  123.         ForEach(
  124.           this.tasks,
  125.           (item: Task, index) => {
  126.             ListItem() {
  127.               // 传方法handleTaskChange不加() 调用方法加()  bind把父组件的this绑定到方法上
  128.               TaskItem({ item: item, onTaskChange: this.handleTaskChange.bind(this) })
  129.             }
  130.             .swipeAction({ end: this.DeleteButton(index) })
  131.           }
  132.         )
  133.       }
  134.       .width('100%')
  135.       .alignListItem(ListItemAlign.Center)
  136.  
  137.     }
  138.  
  139.   }
  140.  
  141.   @Builder DeleteButton(index: number) {
  142.     Button() {
  143.       Image($r('app.media.ic_public_list_deleted'))
  144.         .fillColor(Color.White)
  145.         .width(20)
  146.     }
  147.     .width(40)
  148.     .height(40)
  149.     .type(ButtonType.Circle)
  150.     .backgroundColor(Color.Red)
  151.     .margin(5)
  152.     .onClick(() => {
  153.       this.tasks.splice(index, 1)
  154.       this.handleTaskChange()
  155.     })
  156.   }
  157. }
  158.  
  159. @Component
  160. struct TaskItem {
  161.   @ObjectLink item: Task
  162.   onTaskChange: () => void
  163.  
  164.   build() {
  165.     Row() {
  166.       if (this.item.finished) {
  167.         Text(this.item.name)
  168.           .finishedTask()
  169.       } else {
  170.         Text(this.item.name)
  171.           .fontSize(20)
  172.       }
  173.       // 多选框工具
  174.       Checkbox()
  175.         .select(this.item.finished)
  176.         .onChange(val => {
  177.           // 1)更新当前任务状态
  178.           this.item.finished = val
  179.           // 2)更新
  180.           this.onTaskChange()
  181.         })
  182.     }
  183.     .card()
  184.     .layoutWeight(1)
  185.     .justifyContent(FlexAlign.SpaceBetween)
  186.   }
  187. }
  188.

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/333653
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号