HarmonyOS Navigation路由组件使用

Navigation可以作为路由组件来使用
1、可以实现雷同Android startActivityForResult的功能。
2、可以实现页面生命周期函数的回调监听

一、Navigation 根节点监听页面的显示和隐蔽

可以通过Navigation onNavBarStateChange函数监听当前页面(Navigation根节点)的显示和隐蔽，通过@State注解的字段传递给TabContent组件，让TabContent可以观察页面的显示和隐蔽状态。

1. @Entry
2. @Component
3. struct Index {
4.   @Provide indexPathStack: NavPathStack = new NavPathStack()
5.   //当前选中的下标
6.   @State currentIndex: number = 0
7.   private tabsController: TabsController = new TabsController();
8.   @State onPageResume: boolean = false
10.   aboutToAppear(): void {
11.     console.info('Index aboutToAppear')
12.   }
14.   /**
15.    * 应用前后台显示
16.    */
17.   onPageShow(): void {
18.     console.info('Index onPageShow')
19.   }
21.   /**
22.    * 应用前后台隐藏
23.    */
24.   onPageHide(): void {
25.     console.info('Index onPageHide')
26.   }
28.   @Builder
29.   tabBarBuilder(title: string, targetIndex: number, selectIcon: Resource, unSelectIcon: Resource) {
30.     ......
32.   }
34.   build() {
35.     Navigation(this.indexPathStack) {
36.       Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
37.         TabContent() {
38.           Home()
39.         }
40.         .tabBar(this.tabBarBuilder('首页', 0, $r('app.media.ic_home_on'), $r('app.media.ic_home_off')))
42.         TabContent() {
43.           Mine({ onPageResume: this.onPageResume })
44.         }.tabBar(this.tabBarBuilder('我的', 1, $r('app.media.ic_mine_on'), $r('app.media.ic_mine_off')))
45.       }
46.       .vertical(false)
47.       .divider({ strokeWidth: 0.5, color: '#0D182431' })
48.       .scrollable(false)
49.       .backgroundColor('#F1F3F5')
50.     }
51.     .mode(NavigationMode.Stack)
52.     .hideTitleBar(true)
53.     // .hideToolBar(true)
54.     .backgroundColor("#FFFFFF")
55.     .onNavBarStateChange((isVisible: boolean)=>{
56.       //Navigation组件，根节点如何监听隐藏与展示，监听页面占中的显示和隐藏，上个页面返回的时候会触发，https://www.wzhi.top/?id=25
57.       console.info(`onNavBarStateChange isVisible=${isVisible}`)
58.       this.onPageResume = isVisible
59.     })
60.   }
61. }

复制代码

二、Navigation子页面NavDestination实现页面显示隐蔽的监听

Navigation的子页面必要获得栈变量并进行栈的操作，Index.ets的栈变量

1. @Consume indexPathStack: NavPathStack;

复制代码

子页面的实现：

2. @Preview
3. @Component
4. export struct Mine {
5.   @State isLogin: boolean = false
6.   @State userInfo: UserInfo = {
7.     avatar: $r('app.media.ic_default_avatar'),
8.     nickname: '未登录'
9.   }
10.   @Consume indexPathStack: NavPathStack;
11.   isFirstShow: boolean = true;
12.   @Prop @Watch('onPageResumeChange') onPageResume: boolean
14.   /**
15.    * 监听页面课件状态，onPageResume 由Index.ets页面传递过来
16.    */
17.   onPageResumeChange() {
18.     console.info(`Mine onPageResumeChange this.onPageResume=${this.onPageResume}  isFirstShow=${this.isFirstShow}`)
19.     if (this.isFirstShow) {
20.       this.isFirstShow = false
21.       return
22.     }
24.     if (this.onPageResume) {
25.       this.getLocalUserInfo()
26.     }
27.   }
29.   /**
30.    * 在创建自定义组件后，执行其build()函数之前执行（NavDestination创建之前），允许在该方法中改变状态变量，更改将在后续执行build()函数中生效。
31.    */
32.   aboutToAppear(): void {
33.     console.info('mine aboutToAppear')
34.     this.getLocalUserInfo()
35.   }
37.   getLocalUserInfo() {
38.     ......
39.   }
41.   build() {
42.     NavDestination() {
43.       Column() {
44.         ......
45.       }
46.       .width('100%')
47.       .height('100%')
48.       .backgroundColor('#F5F5F5')
49.     }
50.     .mode(NavDestinationMode.STANDARD)
51.     .hideTitleBar(true)
52.     .onShown(() => {
53.       console.info('Mine onShown')
54.     }).onHidden(() => {
55.       console.info('Mine onHidden')
56.     })
58.   }
60.   @Builder
61.   MenuItem(
62.     icon: Resource,
63.     title: string,
64.     onClick: () => void
65.   ) {
66.     ......
67.   }
68. }

复制代码

可以通过NavDestination的方法.onShown/onHidden监听页面的显示和隐蔽，不过NavDestination是Navigation的跟节点，这个方法就不生效了，比方我再Index.ets中使用了Navigation 嵌套Tabs，TabContent中使用了NavDestination，使用onShown/onHidden就无法被回调，必要在Navigation中使用onNavBarStateChange来监听，把状态传递给TabContent实现页面显示隐蔽的监听。
三、Navigation通过NavPathStack实现页面路由(页面跳转)

1、Navigation实现页面路由，其实是通过NavPathStack的方法来实现的。

可以看到Navigation中传入了参数indexPathStack，类型是NavPathStack，在往下看，是子页面NavDestination接收indexPathStack这个变量来进行页面路由

1. @Entry
2. @Component
3. struct Index {
4.   @Provide indexPathStack: NavPathStack = new NavPathStack()
7.   @Builder
8.   tabBarBuilder(title: string, targetIndex: number, selectIcon: Resource, unSelectIcon: Resource) {
9.   ......
11.   }
13.   build() {
14.     Navigation(this.indexPathStack) {
15.       Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
16.         ......
17.       }
18.       .vertical(false)
19.       .divider({ strokeWidth: 0.5, color: '#0D182431' })
20.       .scrollable(false)
21.       .backgroundColor('#F1F3F5')
22.     }
23.     .mode(NavigationMode.Stack)
24.     .hideTitleBar(true)
25.     // .hideToolBar(true)
26.     .backgroundColor("#FFFFFF")
27.     .onNavBarStateChange((isVisible: boolean)=>{
28.       //Navigation组件，根节点如何监听隐藏与展示，监听页面占中的显示和隐藏，上个页面返回的时候会触发，https://www.wzhi.top/?id=25
29.       console.info(`onNavBarStateChange isVisible=${isVisible}`)
30.       this.onPageResume = isVisible
31.     })
32.   }
33. }

复制代码

2、NavDestination接收indexPathStack这个变量来进行页面路

由NavDestination接收indexPathStack这个变量来进行页面路由。
通过 @Consume indexPathStack: NavPathStack 来获取Navigation传递过来的路由栈变量，在onClick中调用this.indexPathStack.pushPathByName 实现页面的跳转。当然参数中的name必要进行配置，接着往下看。

2. @Preview
3. @Component
4. export struct Mine {
6.   @Consume indexPathStack: NavPathStack;
9.   getLocalUserInfo() {
10.    ......
11.   }
13.   build() {
14.     NavDestination() {
15.       Column() {
16.         // 顶部用户信息区域
17.         Row() {
18.           Image(this.userInfo.avatar)
19.             .width(80)
20.             .height(80)
21.             .borderRadius(40)
22.             .margin({ right: 20 })
23.             .onClick(() => {
24.               if (!this.isLogin) {
25.                 console.info('跳转到登录页面')
26.                 this.indexPathStack.pushPathByName('PageLogin', null, true)
27.               }
28.             })
30.             ......
31.         }
32.         .width('100%')
33.         .padding(20)
34.         .backgroundColor('#FFFFFF')
36.       
37.         }
38.         .margin({ top: 12 })
39.         .backgroundColor('#FFFFFF')
40.       }
41.       .width('100%')
42.       .height('100%')
43.       .backgroundColor('#F5F5F5')
44.     }
45.     .mode(NavDestinationMode.STANDARD)
46.     .hideTitleBar(true)
47.     .onShown(() => {
48.       console.info('Mine onShown')
49.     }).onHidden(() => {
50.       console.info('Mine onHidden')
51.     })
53.   }
55.   @Builder
56.   MenuItem(
57.     icon: Resource,
58.     title: string,
59.     onClick: () => void
60.   ) {
61.    ......
62.   }
63. }

复制代码

3、在src/main/resources/base/profile目录下面创建route_map.json文件，进行路由页面的配置

1. {
2.   "routerMap": [
3.     {
4.       "name": "PageLogin",//自定义组件的名称
5.       "pageSourceFile": "src/main/ets/components/login.ets",//自定义组件所在的.ets文件的路径
6.       "buildFunction": "PageLoginBuilder",//路由目标页面需要实现这个方法，调用PageLogin()，才能实现最终的路径
7.       "data": {
8.         "description" : "this is Page Login"//当前路由的描述
10.       }
11.     },
12.     {
13.       "name": "RegisterPage",
14.       "pageSourceFile": "src/main/ets/components/register.ets",
15.       "buildFunction": "PageRegisterBuilder",
16.       "data": {
17.         "description" : "this is Page register"
18.       }
19.     },
20.     {
21.       "name": "SettingPage",
22.       "pageSourceFile": "src/main/ets/components/setting.ets",
23.       "buildFunction": "PageSettingBuilder",
24.       "data": {
25.         "description" : "this is Page setting"
26.       }
27.     }
28.   ]
29. }

复制代码

4、路由目的页面实现，以登录页面为例

2. // 跳转页面入口函数，路由配置中配置的函数名称
3. @Builder
4. export function PageLoginBuilder() {
5.   LoginPage()
6. }
8. @Component
9. struct LoginPage {
10.   @State username: string = ''
11.   @State password: string = ''
12.   @State isLoading: boolean = false
13.   @Consume indexPathStack: NavPathStack
15.   build() {
16.     NavDestination() {
17.       Column() {
18.         
20.       }
21.       .width('100%')
22.       .height('100%')
23.       .backgroundColor('#FFFFFF')
24.     }
25.     .hideTitleBar(true)
26.     .onShown( ()=>{//页面显示的监听
27.       console.info('login onShow')
28.     })
29.     .onHidden(()=>{//页面隐藏的监听
30.       console.info('login onHidden')
31.     })
32.   }
34.   private handleLogin() {
35.     ......
36.   }
37. }

复制代码

完整代码已经上传到gitee:WanHarmony: wanAndroid api 鸿蒙应用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。