HarmonyOS Next如何实现与页面解耦的弹窗？

Question

如题：HarmonyOS Next如何实现与页面解耦的弹窗？
本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

可以使用UIContext.getPromptAction.openCustomDialog的方式，创建并弹出对应的自定义弹窗，支持弹窗和页面解耦。使用Navigation.Dialog弹窗也可以实现全局自定义弹窗，但需要自己实现弹窗模态效果。

//封装弹窗内容和样式，开发者可以在@Builder里自定义组件的内容。
@Component
export struct DialogComponent {
  @Prop message: string = '';

  build() {
    Column() {
      Row() {
        Text('Title')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
      .height(56)
      .justifyContent(FlexAlign.Center)

      Text(this.message)
        .fontSize(14)

      Button('CONFIRM')
        .fontSize(16)
        .fontColor('#0A59F7')
        .backgroundColor(Color.White)
        .onClick(() => {
          let dialogId = AppStorage.get<number>('dialogId');
          promptAction.closeCustomDialog(dialogId)
        })
        .width('100%')
        .margin({
          top: 8,
          bottom: 16
        })
    }
    .padding({
      left: 24,
      right: 24
    })
    .justifyContent(FlexAlign.Center)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(Color.White)
    .borderRadius(32)
    .margin({ left: 16, right: 16 })
  }
}
//在需要使用弹窗的页面中引入弹窗组件。
import { DialogComponent } from '../uitls/DialogComponent';
import { PromptAction } from '@kit.ArkUI';

@Component
export struct GlobalDialogDecoupledFromThePage {
  promptAction: PromptAction = this.getUIContext().getPromptAction();
  @State message: string = 'This is a dialog content.';
  @Consume('NavPathStack') pageStack: NavPathStack;

  @Builder
  customDialogComponent() {
    DialogComponent({ message: this.message })
  }

  build() {
    NavDestination() {
      Column() {
        Row() {
          Button('OPEN')
            .fontSize(16)
            .width('100%')
            .borderRadius(20)
            .margin({ bottom: 16 })
            .backgroundColor('#0A59F7')
            .onClick(() => {
              this.promptAction.openCustomDialog({
                builder: () => {
                  this.customDialogComponent()
                },
                alignment: DialogAlignment.Center,
                maskColor: 'rgba(0, 0, 0, 0.2)',
              }).then((dialogId: number) => {
                AppStorage.setOrCreate('dialogId', dialogId);
              })
            })
        }
        .width('100%')
        .alignItems(VerticalAlign.Center)
      }
      .width('100%')
      .height('100%')
      .padding({
        left: 16,
        right: 16
      })
      .justifyContent(FlexAlign.End)
    }
  }
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。