HarmonyOS 鸿蒙Next中@CustomDialog与状态管理V2之间应该如何搭配使用

HarmonyOS 鸿蒙Next中@CustomDialog与状态管理V2之间应该如何搭配使用 根据文档描述，[@CustomDialog](/user/CustomDialog) 只能部分支持状态管理 V1，而对状态管理 V2 是不支持的。

而根据 V1 和 V2 的兼容使用规则，[@CustomDialog](/user/CustomDialog) 组件是可以在 V2 组件中使用的。

那么就涉及一个问题，V2 组件的状态，应该如何与 [@CustomDialog](/user/CustomDialog) 组件同步。

目前文档推荐使用 promptAction.showCustomDialog 来替代 [@CustomDialog](/user/CustomDialog)，我也推荐这样做。

[@CustomDialog](/user/CustomDialog) 与 V2 注定越走越远。


更多关于HarmonyOS 鸿蒙Next中@CustomDialog与状态管理V2之间应该如何搭配使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复 
import { ComponentContent } from '@kit.ArkUI';

let contentNode: ComponentContent<MyCustomDialog>

interface DialogParams {
  visible: boolean
  onCancel?: () => void;
  onConfirm?: () => void;
}

function buildBackConfirmDialog(dialogParams: DialogParams) {
  MyCustomDialog({ visible: dialogParams.visible, onCancel: dialogParams.onCancel, onConfirm: dialogParams.onConfirm })
}

@Builder
function buildBackConfirmDialog(dialogParams: DialogParams) {
  MyCustomDialog({ visible: dialogParams.visible, onCancel: dialogParams.onCancel, onConfirm: dialogParams.onConfirm })
}

@Entry
@ComponentV2
struct test {
  @Local visible: boolean = false
  @Local openDialogCount: number = 0;
  @Local cancelDialogCount: number = 0;

  @Monitor('visible')
  visibleOnChange() {
    if (this.visible) {
      this.getUIContext().getPromptAction().openCustomDialog(contentNode, {
        onWillDismiss: (data) => {
        }
      })
    } else {
      this.getUIContext().getPromptAction().closeCustomDialog(contentNode)
    }
  }

  aboutToAppear(): void {
    contentNode = new ComponentContent(this.getUIContext(), wrapBuilder(buildBackConfirmDialog), {
      visible: this.visible, onCancel: () => {
        this.cancelDialogCount++
        this.visible = false
      }, onConfirm: () => {
        this.openDialogCount++
        this.visible = false
      }
    } as DialogParams)
  }

  build() {
    Column({ space: 20 }) {
      Text(`open dialog count：${this.openDialogCount}`)
      .fontSize(20)
      Text(`cancel dialog count：${this.cancelDialogCount}`)
      .fontSize(20)
      Button(this.visible ? 'hide' : 'show')
        // 点击修改visible变量后，visible的值可以被Dialog组件监听并响应
        .onClick(() => this.visible = !this.visible)
    }.justifyContent(FlexAlign.Center).width('100%').height('100%')
  }
}

@ComponentV2
struct MyCustomDialog {
  @Param visible: boolean = false;
  // 弹窗交互事件参数，点击确认和取消按钮时的回调函数
  @Param onCancel?: () => void | undefined = undefined;
  @Param onConfirm?: () => void | undefined = undefined;

  build() {
    Column({ space: 12 }) {
      Text("Custom dialog content!").fontSize(20)
      Row() {
        Button("cancel").onClick(() => {
          this.onCancel?.();
        }).margin({ right: 20 })
        Button("confirm").onClick(() => {
          this.onConfirm?.();
        })
      }.justifyContent(FlexAlign.Center)
    }.padding(24).backgroundColor(Color.White)
  }
}

更多关于HarmonyOS 鸿蒙Next中@CustomDialog与状态管理V2之间应该如何搭配使用的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


感觉。。很麻烦。。还是用 promptAction.showCustomDialog 吧。

在HarmonyOS鸿蒙Next中，@CustomDialog用于创建自定义对话框，而状态管理V2（State Management V2）是鸿蒙系统中用于管理组件状态的新机制。要将两者搭配使用，可以通过以下方式实现：

  1. 状态绑定：在自定义对话框中使用状态管理V2来绑定和管理状态。通过@State或@Provide等装饰器，可以在对话框中声明状态变量，并在UI组件中进行绑定。

  2. 状态更新：当对话框中的状态发生变化时，状态管理V2会自动触发UI更新。例如，通过在对话框中使用@State变量，当该变量值发生变化时，对话框中的相关UI组件会自动重新渲染。

  3. 状态共享：如果需要与父组件或兄弟组件共享状态，可以使用@Provide和@Consume装饰器。在父组件中使用@Provide提供状态，在自定义对话框中使用@Consume来消费该状态，从而实现跨组件的状态管理。

  4. 事件处理：在自定义对话框中，可以通过事件处理函数来触发状态的变更。例如，当用户点击对话框中的按钮时，可以调用状态管理V2中的方法来更新状态。

通过以上方式，@CustomDialog与状态管理V2可以有效地结合使用，实现对话框状态的管理和更新。

在HarmonyOS鸿蒙Next中，@CustomDialog与状态管理V2的搭配使用可以通过以下方式实现：

  1. 状态管理：使用@State或@Observed装饰器管理对话框的状态。例如，定义一个isDialogVisible状态来控制对话框的显示与隐藏。

  2. 自定义对话框：通过@CustomDialog装饰器创建自定义对话框组件，并在对话框内部使用状态管理V2来更新UI或处理用户交互。

  3. 状态传递：将父组件的状态传递给@CustomDialog，通过@Prop或@Link装饰器实现父子组件之间的状态同步，确保对话框的显示状态与父组件保持一致。

这种搭配方式可以实现灵活的对话框控制与状态管理，提升应用的用户体验。

回到顶部