HarmonyOS 嵌套弹框的实现

自定义弹框建议使用https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-uicontext-V5#opencustomdialog12

import { ComponentContent } from '@kit.ArkUI';

class BaseParam {
  context: UIContext;

  constructor(context: UIContext) {
    this.context = context;
  }
}

class Dialog1Param extends BaseParam {
  text: string;

  constructor(context: UIContext, text: string) {
    super(context);
    this.text = text;
  }
}


class Dialog2Param extends BaseParam {
  text: string;

  constructor(context: UIContext, text: string) {
    super(context);
    this.text = text;
  }
}

@Builder
function dialog1Builder(params: Dialog1Param) {
  Flex({
    direction: FlexDirection.Column,
    alignContent: FlexAlign.SpaceBetween,
    justifyContent: FlexAlign.Center,
    alignItems: ItemAlign.Center
  }) {
    Text('dialog1')
    Button('页面绑定dialog2打开').onClick(() => {
      let uiContext = params.context;
      let promptAction = uiContext.getPromptAction();
      dialog2 =
        new ComponentContent(uiContext, wrapBuilder(dialog2Builder), new Dialog2Param(params.context, params.text));
      promptAction.openCustomDialog(dialog2);
    })

    Button('页面绑定dialog1关闭').onClick(() => {
      let uiContext = params.context;
      let promptAction = uiContext.getPromptAction();
      promptAction.closeCustomDialog(dialog1);
    })
  }
  .padding(20)
  .width('100%')
  .height('100%')
  .backgroundColor(Color.Pink)
  .borderRadius(10)
}

@Builder
function dialog2Builder(params: Dialog2Param) {
  Flex({
    direction: FlexDirection.Column,
    alignContent: FlexAlign.Center,
    justifyContent: FlexAlign.Center,
    alignItems: ItemAlign.Center,
  }) {
    Text('dialog2')
    Button('页面绑定dialog2关闭').onClick(() => {
      let uiContext = params.context;
      let promptAction = uiContext.getPromptAction();
      promptAction.closeCustomDialog(dialog2);
    })
  }
  .width('80%')
  .height('60%')
  .backgroundColor(Color.Green)
  .borderRadius(10)
}

let dialog1: ComponentContent<Dialog1Param> | undefined = undefined;
let dialog2: ComponentContent<Dialog2Param> | undefined = undefined;

@Entry
@Component
struct GlobalDialog {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Button('全局dialog打开').onClick(() => {
        let uiContext = this.getUIContext();
        let promptAction = uiContext.getPromptAction();
        dialog1 =
          new ComponentContent(uiContext, wrapBuilder(dialog1Builder), new Dialog1Param(uiContext, this.message));
        promptAction.openCustomDialog(dialog1, {
          isModal: false,
          autoCancel: true,
        });
      })
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
    }
    .height('100%')
    .width('100%')
  }
}