HarmonyOS 鸿蒙Next中如何实现不关闭弹窗的情况下,跳转页面,并且返回时弹窗存在

HarmonyOS 鸿蒙Next中如何实现不关闭弹窗的情况下,跳转页面,并且返回时弹窗存在 可以通过使用NavDestination的Dialog模式实现,设置NavDestination的mode属性为NavDestinationMode.DIALOG,具体实现可以参考页面显示类型,示例代码如下:

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

  build() {
    NavDestination() {
      Column(){
        Column() {
          Button('Next page').onClick(() => {
            this.pageStack.pushPathByName('NextPage', '');
          })
          Blank()
          Row() {
            Button('Cancel')
              .onClick(() => {
                this.pageStack.pop();
              })
            Button('Confirm')
              .onClick(() => {
                this.pageStack.pop();
              })
          }
          .width('100%')
          .justifyContent(FlexAlign.SpaceEvenly)
        }
        .padding(16)
        .height(300)
        .width(300)
        .backgroundColor(Color.White)
        .borderRadius(16)
      }
      .justifyContent(FlexAlign.Center)
      .height('100%')
      .width('100%')
    }
    .mode(NavDestinationMode.DIALOG)
    .hideTitleBar(true)
    .backgroundColor('#40000000')
  }
}

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

  build() {
    NavDestination() {
      Column() {
        Button('Back')
          .onClick(() => {
            this.pageStack.pop();
          })
      }
    }
  }
}

@Entry
struct Index {
  @Provide('pageStack') pageStack: NavPathStack = new NavPathStack()

  @Builder
  PageMap(name: string) {
    if (name === 'DialogCpt') {
      DialogCpt()
    } else if (name === 'NextPage') {
      NextPage()
    }
  }

  build() {
    Navigation(this.pageStack) {
      Column() {
        Button('Open dialog')
          .onClick(() => {
            this.pageStack.pushPathByName('DialogCpt', '');
          })
      }
    }
    .navDestination(this.PageMap)
    .backgroundColor('#F1F3F5')
  }
}

更多关于HarmonyOS 鸿蒙Next中如何实现不关闭弹窗的情况下,跳转页面,并且返回时弹窗存在的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

感谢楼主分享

更多关于HarmonyOS 鸿蒙Next中如何实现不关闭弹窗的情况下,跳转页面,并且返回时弹窗存在的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中,可通过windowStageloadContent方法加载新页面,同时保留弹窗状态。使用windowStage.loadContent切换页面内容时,当前页面的UI组件状态(包括弹窗)会被保留在内存中。返回原页面时,系统恢复UI树,弹窗可保持显示。需注意页面生命周期管理,避免状态丢失。

在HarmonyOS Next中,您提供的方案是正确的。通过将NavDestination的mode属性设置为NavDestinationMode.DIALOG,可以将其声明为一个模态弹窗。这个弹窗会被压入导航栈(NavPathStack),与普通页面处于同一栈管理机制下。

关键点在于:

  1. 弹窗即页面DialogCpt组件通过.mode(NavDestinationMode.DIALOG)被定义为弹窗样式,但它本质上仍是一个NavDestination,是导航栈中的一个节点。
  2. 导航栈维护状态:当您在弹窗内调用this.pageStack.pushPathByName('NextPage', '')时,NextPage作为一个新的页面被压入当前栈。此时,DialogCpt这个弹窗节点并未被销毁,只是被新页面覆盖在下方。
  3. 返回时恢复:在NextPage中调用this.pageStack.pop()时,NextPage页面从栈中弹出,栈顶重新变为DialogCpt节点,系统会自动将其以弹窗样式恢复显示,无需额外逻辑。

这种方法的优势是直接利用了系统的导航栈来管理弹窗的生命周期,确保了跳转页面和返回时,弹窗状态(包括其内部数据)得以自动保存和恢复,实现了您所描述的需求。您提供的示例代码是实现此功能的典型方式。

回到顶部