ArkUI框架提供了多种管理状态的装饰器来修饰变量，使用这些装饰器修饰的变量即称为状态变量。
装饰器
作用描述
@State
用于声明组件的内部状态，使组件能够根据状态变化来重新渲染。
@Prop
用于将父组件的属性传递给子组件，实现从父组件向子组件的数据传递。
@Link
用于建立父子组件之间的双向数据绑定，以实现双向同步。
@Provide
用于在跨组件层级中提供状态，允许其他组件使用 @Consume 装饰器来消费这些状态。用于全局状态管理或状态共享。
@Observed
用于观察嵌套类对象属性的变化，以便能够捕获和响应嵌套属性的变化。
@ObjectLink
类似于 @Observed，用于观察嵌套类对象属性的变化，以实现双向同步。
@Watch
用于监听状态变化，并在状态变化时执行相应的操作，例如调用回调函数或触发特定的副作用。
接下来，我们将详细介绍每种装饰器的作用及其用法。
组件内的状态管理@State要实现列表项的展开和收起功能，可以使用 @State 装饰器来定义一个名为 isExpanded 的状态变量。当用户点击列表项时，可以在 onClick 回调中切换 isExpanded 变量的值，以实现展开和收起效果。
@Componentexport default struct TargetListItem { @State isExpanded: boolean = false; ... build() { ... Column() { ... if (this.isExpanded) { Blank() ProgressEditPanel(...) } } .height(this.isExpanded ? $r('app.float.expanded_item_height') : $r('app.float.list_item_height')) .onClick(() => { ... this.isExpanded = !this.isExpanded; ... }) ... }}从父组件单项同步状态@Prop父组件使用 @State 装饰器定义一个名为 isEditMode 的状态变量，表示编辑模式状态。利用条件渲染来根据 isEditMode 的值显示不同的文本和按钮。在用户点击事件发生时，通过回调函数改变 isEditMode 的值以触发界面更新。
@Componentexport default struct TargetList { @State isEditMode: boolean = false; build() { Column() { Row() { // 根据 isEditMode 来条件渲染文本和按钮 if (this.isEditMode) { // 显示取消、全选文本和勾选框 // 显示删除按钮 } else { // 显示 "编辑" 文本和 "添加子目标" 按钮 } // 点击事件触发状态更新 } // 渲染目标列表项 List({ ForEach(this.targetData, (item: TaskItemBean, index: number) => { ListItem() { TargetListItem({ isEditMode: this.isEditMode, // 其他属性 }) } }) }) // 根据 isEditMode 来条件渲染按钮 if (this.isEditMode) { Button("删除") } else { Button("添加任务") } } }}子组件使用 @Prop 装饰器修饰子组件的 isEditMode 变量，定义子组件的编辑模式状态。根据 isEditMode 的值控制目标项最右侧是否预留位置和显示勾选框。
@Componentexport default struct TargetListItem { @Prop isEditMode: boolean; build() { Column() { // 根据 isEditMode 控制样式 .padding({ right: this.isEditMode ? "编辑模式的右边距" : "非编辑模式的右边距" }) // 根据 isEditMode 控制显示勾选框 if (this.isEditMode) { Row() { Checkbox() } } // 其他内容 } }}
最后，确保在父组件中使用子组件时，将父组件的编辑模式状态 this.isEditMode 传递给子组件的编辑模式状态 isEditMode。
父子组件双向同步状态@Link理解了您的要求，以下是精简后的内容，描述了如何在父子组件之间双向同步状态以实现列表项的切换功能：
父组件使用 @State 装饰器定义 clickIndex 状态，用于记录被点击的目标项的索引。将 clickIndex 传递给子组件 TargetListItem，建立双向同步关系。@Componentexport default struct TargetList { @State clickIndex: number = 0; build() { ... TargetListItem({ clickIndex: $clickIndex, ... }) ... }}子组件使用 @Link 装饰器定义 clickIndex，以实现与父组件的双向同步。使用 @Watch 装饰器监听 clickIndex 的变化，当状态发生变化时，触发回调函数 onClickIndexChanged。在 onClickIndexChanged 回调函数中，判断当前列表项的索引是否与被点击的目标索引相等，如果不相等，则将 isExpanded 状态置为 false，实现目标项的收起。
@Componentexport default struct TargetListItem { @Link @Watch('onClickIndexChanged') clickIndex: number; @State isExpanded: boolean = false; onClickIndexChanged() { if (this.clickIndex != this.index) { this.isExpanded = false; } } build() { ... .onClick(() => { ... this.clickIndex = this.index; ... }) ... }}
这个过程中，父组件中的 clickIndex 与子组件中的 clickIndex 建立了双向同步关系。当用户点击不同的目标项时，clickIndex 会在父组件和子组件之间同步，从而实现了目标项的切换和展开/收起功能。
跨组件层级双向同步状态：@Provide和@Consume@Provide 装饰器：用于将状态提供给后代组件。组件使用 @Provide 修饰的状态变量可以自动传递给其后代组件，使后代组件能够访问和使用这些状态。@Consume 装饰器：用于感知并访问通过 @Provide 提供的状态。组件使用 @Consume 修饰的变量可以访问提供者组件的状态，并在状态更新时触发当前组件的重新渲染。这种模式通常用于构建跨组件层级的状态管理，使得状态可以在组件树中自动传递，而且在状态更新时可以自动触发相关组件的重新渲染，以确保数据的一致性和实时性。
这个模式非常有用，特别是在大型应用程序中，它可以简化状态管理并提高代码的可维护性。通过 @Provide 和 @Consume 装饰器，您可以轻松地传递和访问状态，而不必手动将状态从一个组件传递到另一个组件。这有助于减少样板代码，提高开发效率。
