HarmonyOS鸿蒙Next中state修饰的状态变化ui未监听到

在 HarmonyOS Next 中，@Builder 函数内使用 @Component 组件时，如果组件的状态变化未触发 UI 更新，通常是因为 @Builder 函数在每次渲染时都会重新执行，导致其内部的 @Component 被重新创建，状态丢失。

在你的代码中，listDemo 是一个 @Builder 函数，它内部通过 ForEach 创建了多个 listDemoCom 组件实例。当 DialogPage 中的 list 数组或 show 状态变化时，listDemo 函数会重新执行，listDemoCom 组件会经历销毁和重建的过程，其内部的 @State isload 状态会被重置为初始值 false。因此，你在 listDemoCom 内通过 onClick 设置的 this.isload = true 虽然执行了，但组件很快被重建，状态恢复初始值，UI 看起来没有变化。

解决方案：将状态提升到父组件（DialogPage）中管理。

具体修改如下：

1. 在 DialogPage 中定义一个状态来管理每个列表项的加载状态。 例如，可以使用一个对象或数组来存储。
2. 将 listDemoCom 组件改为无状态组件，通过 @Prop 接收父组件传递的加载状态和改变该状态的方法。

修改后的代码示例：

@Entry
@Component
struct DialogPage {
  @StorageLink('isLoading') isLoading: boolean = false;
  @State show: boolean = false;
  @State list: number[] = [1, 2, 3, 4, 5, 6];
  // 新增：使用一个数组来管理每个列表项的加载状态
  @State itemLoadingStates: boolean[] = [false, false, false, false, false, false];

  @Builder
  listDemo() {
    Column() {
      List() {
        ForEach(this.list, (item: number, index) => {
          // 将状态和状态更新方法通过参数传递给子组件
          listDemoCom({
            item: item,
            index: index,
            isLoading: this.itemLoadingStates[index], // 传递当前项的加载状态
            onLoadingChange: (newValue: boolean) => {
              // 更新父组件中对应项的状态
              this.itemLoadingStates[index] = newValue;
            }
          })
        })
      }
    }
  }

  build() {
    Column() {
      Button('打开面板')
        .onClick(() => {
          this.show = true
        })
        .bindSheet($$this.show, this.listDemo, {
          detents: [SheetSize.FIT_CONTENT],
          backgroundColor: Color.White,
          showClose: false,
          onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
            DismissSheetAction.dismiss()
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

@Component
struct listDemoCom {
  @Prop item: number
  @Prop index: number = 0;
  // 接收父组件传递的加载状态
  @Prop isLoading: boolean = false;
  // 接收父组件传递的状态更新方法
  @Prop onLoadingChange: (value: boolean) => void;

  @StorageLink('isLoading') globalLoading: boolean = false;

  aboutToAppear(): void {
    // 可以根据需要初始化，但状态主要来自父组件传递的 @Prop
    console.log('true')
  }

  build() {
    ListItem() {
      Row() {
        // 使用从父组件传递的 isLoading 状态
        if (this.isLoading && this.index == 0) {
          LoadingProgress()
        } else {
          Text(this.item + '')
        }
      }
      .width('100%')
      .height(40)
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)
      .onClick(() => {
        // 调用父组件传递的方法来更新状态
        this.onLoadingChange(true);
        this.globalLoading = true;
        setTimeout(() => {
          this.onLoadingChange(false);
          this.globalLoading = false;
          console.log('改变状态', this.isLoading)
        }, 10000)
      })
    }
  }
}

关键改动说明：

• 状态提升： 将原本属于 listDemoCom 的 @State isload 提升到其父组件 DialogPage 中，定义为 @State itemLoadingStates: boolean[]。
• 数据传递： DialogPage 通过 @Builder 函数 listDemo 创建 listDemoCom 时，将对应索引的加载状态 (this.itemLoadingStates[index]) 和一个状态更新函数 (onLoadingChange) 通过 @Prop 传递给子组件。
• 状态更新： 子组件 listDemoCom 的 onClick 事件中，不再直接修改自己的状态，而是调用父组件传入的 onLoadingChange 方法来更新父组件中的状态数组。父组件状态更新后，会触发 listDemo 函数重新执行，并将新的状态值传递给子组件，从而驱动 UI 更新。

这样修改后，状态由父组件统一管理，避免了子组件因重建而导致的状态丢失问题，UI 能够正确响应状态变化。