Harmony弹窗展示在二级页面上层问题及Dialog相关问题

最新推荐文章于 2025-10-28 15:44:44 发布

原创最新推荐文章于 2025-10-28 15:44:44 发布 · 268 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #firebug

Harmony弹窗相关知识参考官方文档：

文档中心

除了特殊的业务弹窗，自定义弹窗分为两种：

1.不依赖UI组件的自定义弹出框 (openCustomDialog)

2.基础自定义弹出框 (CustomDialog)

第二种需要依赖Component 考虑复用和解耦一般情况使用第一种，也是官方推荐使用的

this.ctx.getPromptAction().openCustomDialog(this.contentNode, this.options)
  .then(() => {
    console.info('OpenCustomDialog complete.')
  })
  .catch((error: BusinessError) => {
    let message = (error as BusinessError).message;
    let code = (error as BusinessError).code;
    console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`);
  })

但是存在一个问题，不管PromptAction是通过MainWindow还是subWindow获取的。弹窗显示后再打开其他页面弹窗还是在最顶层，很明显很多场景不能用

通过网上搜集和给华为工程师提单，有两种处理方式：

1.进入其他页面前关闭弹窗，通过appstorage保存弹窗状态回来后再显示

2.使用将弹窗作为NaDestinaton组件，搭配Navigation使用

index.ets

@Entry
@Component
struct Index {
  @Provide('NavPathStack') pageStack: NavPathStack = new NavPathStack()
  @Builder
  PagesMap(name: string) {
    if (name == 'DialogPage') {
      DialogPage()
    }
  }

  build() {
    Navigation(this.pageStack) {
      Button('Push DialogPage')
        .margin(20)
        .width('80%')
        .onClick(() => {
          this.pageStack.pushPathByName('DialogPage', '',(popInfo)=>{
            console.debug(popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
          });
        })
    }
    .mode(NavigationMode.Stack)
    .title('Main')
    .navDestination(this.PagesMap)
  }
}

dialogPage.ets

@Component
export struct DialogPage {
  @Consume('NavPathStack') pageStack: NavPathStack;

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Center }) {
        Column() {
          Text("Dialog NavDestination")
            .fontSize(20)
            .margin({ bottom: 100 })
          Row(){
            Button("Close").onClick(() => {
              this.pageStack.pop({})
            }).width('30%')
            Button("Jump").onClick(() => {
              router.pushUrl({url:'pages/PageTwo'})
            }).width('30%')
          }.width('80%')
          .justifyContent(FlexAlign.SpaceEvenly)
        }
        .justifyContent(FlexAlign.Center)
        .backgroundColor(Color.White)
        .borderRadius(10)
        .height('30%')
        .width('80%')
      }.height("100%").width('100%')
    }
    .backgroundColor('rgba(0,0,0,0.5)')
    .hideTitleBar(true)
    .mode(NavDestinationMode.DIALOG)
  }
}

跳转页面可以继续使用Router方式不受影响，经测试OK

以上，后续有弹窗相关问题继续更新