HarmonyOS 鸿蒙Next DIALOG模式的NavDestination出页面栈不影响下层NavDestination的生命周期

发布于 1周前 作者 songsunli 来自 鸿蒙OS

HarmonyOS 鸿蒙Next DIALOG模式的NavDestination出页面栈不影响下层NavDestination的生命周期

当前项目所用的路由管理为navigation,问题场景如下

page1为标准模式的NavDestination, page2为DIALOG模式的NavDestination,

需要在page1的onwillshow周期请求数据

从page1进入到page2,然后再page2返回到page1,page1的onwillshow周期不会触发, 请求不了数据, 原因就是DIALOG模式的NavDestination进出页面栈不影响下层NavDestination的生命周期, 有没有解决方法


更多关于HarmonyOS 鸿蒙Next DIALOG模式的NavDestination出页面栈不影响下层NavDestination的生命周期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

可以尝试使用onVisibleAreaChange回调函数,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-visible-area-change-event-V5

NavigationonWillShowonWillHidden 示例代码:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabcontent.md#onwillhide12

下面是一个demo案例:

@Entry
@Component
struct TabBarStyleExample1 {
  @State message:string = "hello word"
  @State color:Color = Color.Black
  @Builder MyColum(){
    Childs({colors:this.color,message:this.message})
  }
  build() {
    Column({ space: 5 }) {
      Text("底部页签样式")
      Column() {
        Tabs({ barPosition: BarPosition.End }) {
          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Pink'))
          .onWillShow(() => {
            this.message = "Pink"
            this.color = Color.Pink
            console.info("Pink will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Pink will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Yellow'))
          .onWillShow(() => {
            this.message = "Yellow"
            this.color = Color.Yellow
            console.info("Yellow will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Yellow will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Blue'))
          .onWillShow(() => {
            this.message = "Blue"
            this.color = Color.Blue
            console.info("Blue will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Blue will hide")
          })

          TabContent() {
            this.MyColum()
          }.tabBar(new BottomTabBarStyle($r('sys.media.ohos_app_icon'), 'Green'))
          .onWillShow(() => {
            this.message = "Green"
            this.color = Color.Green
            console.info("Green will show")
          })
          .onWillHide(() => {
            this.message = "Blue1"
            console.info("Green will hide")
          })
        }
        .vertical(false)
        .scrollable(true)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          console.info(index.toString())
        })
        .width('100%')
        .backgroundColor(0xF1F3F5)
      }.width('100%').height(200)

    }
  }
}

@Reusable
@Component
struct Childs{
  @State colors:Color = Color.Green;
  @Prop@Watch('onChage') message:string = ''

  onChage(){
    console.log(':::onChage')
  }

  build() {
    Column(){
      Text(this.message)
    }.width('100%').height('100%').backgroundColor(this.colors)
    .onVisibleAreaChange([0.0, 1.0], (isVisible: boolean, currentRatio: number) => {
      console.info(':::Test Text isVisible: ' + isVisible + ', currentRatio:' + currentRatio)
    })

  }
}

更多关于HarmonyOS 鸿蒙Next DIALOG模式的NavDestination出页面栈不影响下层NavDestination的生命周期的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


PathStack.push的callback里面监听可以不?

在HarmonyOS中,关于Next DIALOG模式的NavDestination出页面栈不影响下层NavDestination的生命周期的问题,这通常与页面导航和生命周期管理机制有关。

在HarmonyOS的导航组件中,DIALOG模式的NavDestination被设计为浮于当前页面之上的对话框形式。当这种模式的页面出栈时,它不会触发下层NavDestination的生命周期变化,这是因为DIALOG模式的页面并不被视为一个新的页面层级,而是作为当前页面的一部分存在。

具体来说,DIALOG模式的页面出栈时,只是隐藏了对话框,而没有销毁或替换下层的页面内容。因此,下层的NavDestination(即当前主页面)的生命周期会保持不变,继续处于活跃状态。

这种设计允许开发者在不干扰当前主页面生命周期的情况下,灵活地显示和隐藏对话框页面。它使得对话框页面与主页面之间的交互更加流畅,同时也简化了页面导航和生命周期管理的复杂性。

如果开发者需要在DIALOG模式页面出栈时执行某些操作,可以考虑在对话框页面的隐藏或销毁事件中添加相应的逻辑处理。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部