学习ArkTS -- 状态管理

装饰器

@State

在声明式UI中，是以状态驱动试图更新：
在这里插入图片描述
状态（State）：指驱动视图更新的数据（被装饰器标记的变量）
视图（View）：基于UI描述渲染得到用户界面

说明：
@State装饰器标记的变量必须初始化，，不能为空值
@State支持Object，class，string，number，boolean，enum类型以及这些类型的数组
嵌套类型以及数组中的对象属性无法触发试图更新

@Prop 和 @Link

当父子组件之间需要数据同步时，可以使用@Prop 跟C++函数传值差不多和@Link装饰器跟C++函数传引用差不多。
在这里插入图片描述

// @ts-nocheck
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: numberbuild() {Row(){Text('任务进度').fontSize(30).fontWeight(FontWeight.Bold)Stack(){Progress({value: this.finishTask,total: this.totalTask,type: ProgressType.Ring}).width(100)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(){// 2. 更新任务总数量this.stat.finishTask = this.tasks.filter(item => item.finished).length// 2. 更新任务总数量this.stat.totalTask = this.tasks.length}build(){Column() {Button('新增任务').width(200).onClick(() => {// 1. 新增任务数量this.tasks.push(new Task())this.handleTaskChange()})// 3. 任务列表List({ space: 10 }) {ForEach(this.tasks,(item, 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')).width(30)}.width(40).height(40).backgroundColor(Color.Red).type(ButtonType.Circle).margin(5).onClick(() => {this.tasks.splice(index, 1)this.handleTaskChange()})}
}

在这里插入图片描述

@Provide 和 @Consume 可以夸组件提供类似于@State和@Link的双向同步

在这里插入图片描述

@ObjectLink 和 @Observed

@ObjectLink 和 @Observed装饰器用于在涉及嵌套对象或数组元素为对象的场景中进行双向数据同步。
在这里插入图片描述

// @ts-nocheck
@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{// 总任务量@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: numberbuild() {Row(){Text('任务进度').fontSize(30).fontWeight(FontWeight.Bold)Stack(){Progress({value: this.finishTask,total: this.totalTask,type: ProgressType.Ring}).width(100)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(){// 2. 更新任务总数量this.stat.finishTask = this.tasks.filter(item => item.finished).length// 2. 更新任务总数量this.stat.totalTask = this.tasks.length}build(){Column() {Button('新增任务').width(200).onClick(() => {// 1. 新增任务数量this.tasks.push(new Task())this.handleTaskChange()})// 3. 任务列表List({ space: 10 }) {ForEach(this.tasks,(item:Task, index) => {ListItem() {TeskItem({ 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')).width(30)}.width(40).height(40).backgroundColor(Color.Red).type(ButtonType.Circle).margin(5).onClick(() => {this.tasks.splice(index, 1)this.handleTaskChange()})}
}@Componentstruct TeskItem {@ObjectLink item: TaskOnTaskChange: () => voidbuild() {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.OnTaskChange()})}.card().justifyContent(FlexAlign.SpaceBetween)}
}