HarmonyOS Navigation路由打开的entry页面，不回调onBackPress方法，怎么监听侧滑操作？

Navigation路由打开的entry页面，不回调onBackPress方法，怎么监听侧滑操作？

HarmonyOS

put_get

2024-10-28 10:17:02

浏览

回答 1

待解决

回答 1

按赞同

按时间

zbw_apple

在Navigation路由打开的entry页面，如果不需要回调onBackPress方法来处理侧滑操作，可以使用可以通过Page页监听到onpageshow onpagehide 的变化，传递到组件。

onPageShow、onPageHide、onBackPress等生命周期回调函数，仅对@Entry装饰的自定义组件生效。

NavDestination定义的子页面，有Navigation作为入口，语义上不建议额外设置@Entry作为入口标记。

如果强行要将NavDestination设置@Entry，由于一个页面只能有一个@Entry，需要把NavDestination单独写在另一个文件里，添加@Entry再export使用。这是不推荐的做法。即使如此，Navigation跳转时，也不会执行这些对应的生命周期函数。

NavDestination提供了onShown、onHidden、onBackPressed等属性可以设置对应的回调函数，可以通过这些属性设置。具体内容请参考：

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-navigation-V5#示例

Navigation路由跳转中，对于部分页面不能侧滑且pop到相应页面，可以使用onBackPressed（）方法返回true或false来监控侧滑，并做相应的逻辑处理。若需要pop掉页面，可以再跳转到其他页面的地方进行pop，如果在onBackPressed（）方法中进行pop，会导致禁止侧滑功能失效。

参考demo如下：

import { PageOneTmp } from './PageOne'  
import { pageTwoTmp } from './PageTwo'  
import { pageThreeTmp } from './PageThree'  
  
@Entry  
@Component  
struct NavigationExample {  
  @Provide('pageInfo')  
  pageInfo: NavPathStack = new NavPathStack()  
  
  @Builder  
  PageMap(name: string) {  
    if (name === 'pageOne') {  
      PageOneTmp()  
    } else if (name === 'pageTwo') {  
      pageTwoTmp()  
    } else if (name === 'pageThree') {  
      pageThreeTmp()  
    }  
  }  
  
  build() {  
    Navigation(this.pageInfo) {  
      Column() {  
        Button('StartTest', { stateEffect: true, type: ButtonType.Capsule })  
          .width('80%')  
          .height(40)  
          .margin(20)  
          .onClick(() => {  
            this.pageInfo.pushPath({ name: 'pageOne' });  
          })  
      }  
    }.title('NavIndex').navDestination(this.PageMap)  
  }  
}

//pageOne.ets

@Entry  
@Component  
export struct PageOneTmp {  
  @Consume('pageInfo') pageInfo: NavPathStack;  
  
  build() {  
    NavDestination() {  
      Column() {  
        Button('跳转到Page2', { stateEffect: true, type: ButtonType.Capsule })  
          .width('80%')  
          .height(40)  
          .margin(10)  
          .onClick(() => {  
            this.pageInfo.pushPath({ name: 'pageTwo' });  
          })  
      }.width('100%').height('100%')  
    }.title('pageOne').onBackPressed(() => {  
      return false;  
    })  
  }  
}

//PageTwo.ets

@Entry  
@Component  
export struct pageTwoTmp {  
  @Consume('pageInfo') pageInfo: NavPathStack;  
  
  build() {  
    NavDestination() {  
      Column() {  
        Button('跳转到page3', { stateEffect: true, type: ButtonType.Capsule })  
          .width('80%')  
          .height(40)  
          .margin(10)  
          .onClick(() => {  
            this.pageInfo.pop(Number(1)) //若页面禁止侧滑，可以在跳转到其他页面或者返回按钮的地方使用pop  
            this.pageInfo.pushPath({ name: 'pageThree' });  
          })  
      }.width('100%').height('100%')  
    }.title('pageTwo')  
    .onBackPressed(() => {  
      return true; //不能侧滑页面设置为true （此处pop和true不能同时使用，否则不具备禁止侧滑的功能）  
    })  
  }  
}

//PageThree.ets

@Component  
export struct pageThreeTmp {  
  @Consume('pageInfo') pageInfo: NavPathStack;  
  
  build() {  
    NavDestination() {  
      Column() {  
        Button('返回pageTwo', { stateEffect: true, type: ButtonType.Capsule })  
          .width('80%')  
          .height(40)  
          .margin(10)  
          .onClick(() => {  
            this.pageInfo.pushPath({ name: 'pageTwo' });  
          })  
      }.width('100%').height('100%')  
    }.title('pageThree')  
    .onBackPressed(() => {  
      return false; //因为需要去掉禁止侧滑的url,所以侧滑回退到pageOne页面  
    })  
  }  
}

2024-10-28 16:29:24

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS Navigation路由打开的entry页面，不回调onBackPress方法，怎么监听侧滑操作？

订阅鸿蒙技术特刊，精选内容抢先看