HarmonyOS第一课_构建更加丰富的页面

管理组件状态

概述

组件内的状态管理：@State

从父组件单向同步状态：@Prop

与父组件双向同步状态：@Link

跨组件层级双向同步状态：@Provide 和@Consume

概述

在应用中，界面通常都是动态的。如图 1 所示，在子目标列表中，当用户点击目标一，目标一会呈现展开状态，再次点击目标一，目标一呈现收起状态。界面会根据不同的状态展示不一样的效果。

ArkUI 作为一种声明式 UI，具有状态驱动 UI 更新的特点。当用户进行界面交互或有外部事件引起状态改变时，状态的变化会触发组件自动更新。所以在 ArkUI 中，我们只需要通过一个变量来记录状态。当改变状态的时候，ArkUI 就会自动更新界面中受影响的部分。

在组件内使用@State 装饰器来修饰变量，可以使组件根据不同的状态来呈现不同的效果。若当前组件的状态需要通过其父组件传递而来，此时需要使用@Prop 装饰器；若是父子组件状态需要相互绑定进行双向同步，则需要使用@Link 装饰器。使用@Provide 和@Consume 装饰器可以实现跨组件层级双向同步状态。

在实际应用开发中，应用会根据需要封装数据模型。如果需要观察嵌套类对象属性变化，需要使用@Observed 和@ObjectLink 装饰器。

在实际应用开发中，应用会根据需要封装数据模型。如果需要观察嵌套类对象属性变化，需要使用@Observed 和@ObjectLink 装饰器。

父组件 TargetList 中内的状态管理：@State

实际开发中由于交互，组件的内容呈现可能产生变化。当需要在组件内使用状态来控制 UI 的不同呈现方式时，可以使用@State 装饰器。以任务管理应用为例，当点击子目标列表的其中一项，列表项会展开。当再次点击同一项，列表项会收起。所以，对于某一个列表项来说，它的呈现方式会受列表项是否展开这个状态影响。

将是否展开这个状态定义为 isExpanded 变量，当其值为 false 表示目标项收起，值为 true 时表示目标项展开。

//声明isExpanded变量
@State isExpanded: boolean = false;
...
if (this.isEditMode) {
            Text($r('app.string.cancel_button'))
              .onClick(() => {//点击取消按钮触发
                this.isEditMode = false;

               })

            Text($r('app.string.select_all_button'))
          } else {//点击编辑按钮触发
            Text($r('app.string.edit_button'))
              .onClick(() => {
                this.isEditMode = true;
              })
          }

此时，需要使用@State 装饰器修饰 isExpanded，使其成为目标项内部的状态变量。通过@State 装饰后，框架内部会建立数据与视图间的绑定，

其具体实现只要用@State 修饰 isExpanded 变量，定义是否展开状态。然后通过条件渲染，实现是否显示进度调整面板和列表项的高度变化。最后，监听列表项的点击事件，在 onClick 回调中改变 isExpanded 状态。

这样就实现了对相同列表项点击时，列表项的展开和收起功能。当用户反复点击同一个列表项时，组件内的 isExpanded 状态变化，列表项会自动更新。

从父组件单向同步状态到子组件 TargetListItem：@Prop

当子组件中的状态依赖从父组件传递而来时，需要使用@Prop 装饰器，@Prop 修饰的变量可以和其父组件中的状态建立单向同步关系。当父组件中状态变化时，该状态值也会更新至@Prop 修饰的变量；对@Prop 修饰的变量的修改不会影响其父组件中的状态。

在目标管理应用中，当用户点击子目标列表的“编辑”文本，列表进入编辑模式，点击取消，列表退出编辑模式。

整个列表是自定义组件 TargetList，顶部是文本显示区域，主要是 Text 组件，底部是一个 Button 组件。中间区域则是用来显示每个目标项，目标项是自定义组件 TargetListItem。

从图中可以看出，TargetListItem 是 TargetList 的子组件。TargetList 是 TargetListItem 父组件。

对于父组件 TargetList，其顶部显示的文本和底部按钮会随编辑模式的变化而变化，因此父组件拥有编辑模式状态。

对于子组件 TargetListItem，其最右侧是否预留位置和显示勾选框也会随编辑模式变化，因此子组件也拥有编辑模式状态。

但是是否进入编辑模式，其触发点是在用户点击列表的“编辑”或取消按钮，状态变化的源头仅在于父组件 TargetList。当父组件 TargetList 中的编辑模式变化时，子组件 TargetListItem 的编辑模式状态需要随之变化。

在父组件 TargetList 中可以定义一个是否进入编辑模式的状态，即用@State 修饰 isEditMode。@State 修饰的变量不仅是组件内部的状态，也可以作为子组件单向或双向同步的数据源。ArkUI 提供了@Prop 装饰器，@Prop 修饰的变量可以和其父组件中的状态建立单向同步关系，所以用@Prop 修饰子组件 TargetListItem 中的 isEditMode 变量。

在父组件 TargetList 中，用@State 修饰 isEditMode，定义编辑模式状态。然后利用条件渲染实现根据是否进入编辑模式，显示不同的文本和按钮。同时，在父组件中需要在用户点击时改变状态，触发界面更新。

@Component
export default struct TargetListItem {
   @Prop isEditMode: boolean;//从父组件TargetList传递过来的参数
   ...
       Column() {
        ...
       }
       .padding({
        ...
        right: this.isEditMode ? $r('app.float.list_edit_padding')
               : $r('app.float.list_padding')//三元运算符，根据isEditMode的值选择排列的图标状态
       })
       ...

       if (this.isEditMode) {//根据isEditMode的值选择是否有勾选框，即编辑模式下才有勾选框，否则跳过
        Row() {
           Checkbox()...
        }
       }
  ...
}

当点击“编辑”事件发生时，进入编辑模式，显示取消、全选文本和勾选框，同时显示删除按钮；当点击“取消”事件发生时，退出编辑模式，显示“编辑”文本和“添加子目标”按钮。

最后，最关键的一步就是要在父组件中使用子组件时，将父组件的编辑模式状态 this.isEditMode 传递给子组件的编辑模式状态 isEditMode。

@Component
export default struct TargetList {
  @State isEditMode: boolean = false;
  ...
  build() {
    Column() {
      ...
      List({ space: CommonConstants.LIST_SPACE }) {
        ForEach(this.targetData, (item: TaskItemBean, index: number) => {
          ListItem() {
            TargetListItem({
              isEditMode: this.isEditMode,//传递参数至子组件
              ...
            })
          }
        }, (item, index) => JSON.stringify(item) + index)
      }
      ...
    }
    ...
  }
}

与父组件双向同步状态：@Link

若是父子组件状态需要相互绑定进行双向同步时，可以使用@Link 装饰器。父组件中用于初始化子组件@Link 变量的必须是在父组件中定义的状态变量。

在目标管理应用中，当用户点击同一个目标，目标项会展开或者收起。当用户点击不同的目标项时，除了被点击的目标项展开，同时前一次被点击的目标项会收起。

如上图所示，当目标一展开时，点击目标三，目标三会展开，同时目标一会收起。再点击目标一时，目标一展开，同时目标三会收起。

从目标一切换到目标三的流程中，关键在于最后目标一的收起，当点击目标三时，目标一需要知道点击了目标三，目标一才会收起。

在子目标列表中，每个列表项都有其位置索引值 index 属性，表示目标项在列表中的位置。index 从 0 开始，即第一个目标项的索引值为 0，第二个目标项的索引值为 1，以此类推。此外，clickIndex 用来记录被点击的目标项索引。当点击目标一时，clickIndex 为 0，点击目标三时，clickIndex 为 2。

在父组件子目标列表和每个子组件目标项中都拥有 clickIndex 状态。当目标一展开时，clickIndex 为 0。此时点击目标三，目标三的 clickIndex 变为 2，只要其父组件子目标列表感知到 clickIndex 状态变化，同时将此变化传递给目标一。目标一的 clickIndex 即可同步改变为 2，即目标一感知到此时点击了目标三。

将列表和目标项对应到列表组件 TargetList 和列表项 TargetListItem。首先，需要在父组件 TargetList 中定义 clickIndex 状态。

若此时子组件中的 clickIndex 用@Prop 装饰器修饰，当子组件中 clickIndex 变化时，父组件无法感知，因为@Prop 装饰器建立的是从父组件到子组件的单向同步关系。

ArkUI 提供了@Link 装饰器，用于与父组件双向同步状态。当子组件 TargetListItem 中的 clickIndex 用@Link 修饰，可与父组件 TargetList 中的 clickIndex 建立双向同步关系。

@Component
export default struct TargetList {
  @State clickIndex: number = CommonConstants.DEFAULT_CLICK_INDEX;
  ...
             TargetListItem({
               clickIndex: $clickIndex,
              ...
             })
  ...
}

首先，在父组件 TargetList 中用@State 装饰器定义点击的目标项索引状态。然后，在子组件 TargetListItem 中用@Link 装饰器定义 clickIndex，当点击目标项时，clickIndex 更新为当前目标索引值。

完成在父子组件中定义状态后，最关键的就是要建立父子组件的双向关联关系。在父组件中使用子组件时，将父组件的 clickIndex 传递给子组件的 clickIndex。其中父组件的 clickIndex 加上$表示传递的是引用。

@Component
export default struct TargetListItem {
  @Link @Watch('onClickIndexChanged') clickIndex: number;
  @State isExpanded: boolean = false
  ...

  onClickIndexChanged() {
    if (this.clickIndex != this.index) {
      this.isExpanded = false;
    }
  }

  build() {
    ...
       Column() {
        ...
       }
       .onClick(() => {
        ...
           this.clickIndex = this.index;
        ...
       })
    ...
  }
}

当目标一感知到点击了目标三时，还需要将目标一收起，切换列表项的功能才是完整的。此时，目标一感知到 clickIndex 变为 2，需要判断与目标一本身的位置索引值 0 不相等，从而将目标一收起。此时，就需要用到 ArkUI 中监听状态变化@Watch 的能力。用@Watch 修饰的状态，当状态发生变化时，会触发声明时定义的回调。

我们给 TargetListItem 的中的 clickIndex 状态加上@Watch("onClickIndexChanged")。这表示需要监听 clickIndex 状态的变化。当 clickIndex 状态变化时，将触发 onClickIndexChanged 回调：如果点击的列表项索引不等于当前列表项索引，则将 isExpanded 状态置为 false，从而收起该目标项。

跨组件层级双向同步状态：@Provide 和@Consume

跨组件层级双向同步状态是指@Provide 修饰的状态变量自动对提供者组件的所有后代组件可用，后代组件通过使用@Consume 装饰的变量来获得对提供的状态变量的访问。@Provide 作为数据的提供方，可以更新其子孙节点的数据，并触发页面渲染。@Consume 在感知到@Provide 数据的更新后，会触发当前自定义组件的重新渲染。

使用@Provide 的好处是开发者不需要多次将变量在组件间传递。@Provide 和@Consume 的具体使用方法请参见开发指南：@Provide 装饰器和@Consume 装饰器：与后代组件双向同步。