鸿蒙：Navigation的基本利用

注：本章只是简单先容一下其用法，详情请看官方文档：
Navigation：文档中央
1. Navigation：

Navigation组件是路由导航的根视图容器，一样平常作为Page页面的根容器利用，其内部默认包含了标题栏、内容区和工具栏，此中内容区默认首页显示导航内容（Navigation的子组件）或非首页显示（NavDestination的子组件），首页和非首页通过路由举行切换。
NavRouter ：导航组件，默认提供点击相应处理处罚，不需要开发者自定义点击事故逻辑。必须包含两个子组件，此中第二个子组件必须为NavDestination。
NavDestination： 作为子页面的根容器，用于显示Navigation的内容区。
1.1 Navigation + NavRouter + NavDestination实现组件跳转（API9）

Navigation内书写的是页面的内容，是Navigation实现页面跳转最外层的跟容器，如果嵌套NavRouter，NavRouter下需要嵌套两个子组件，第一个子组件自定义，点击可以跳转到第二个子组件，第二个必须为NavDestination包裹的子组件，用于显示跳转目标组件的内容。详情看代码：

1. @Entry
2. @Component
3. struct NavigationAPI9 {
4.   build() {
5.     Column() {
6.       Navigation() {
7.         Text('页面1')
8.         NavRouter() {
9.           // 只能写一个组件，写的多了，后面替换前面
10.           Button('按钮1')
11.           Button('按钮2')
12.           NavDestination() {
13.             Text('页面2')
14.             NavRouter() {
15.               Button('按钮3')
16.               NavDestination() {
17.                 Text('页面3')
18.                 NavRouter() {
19.                   // .....
20.                 }
21.               }
22.             }
23.           }
24.         }
25.       }
26.     }
27.     .height('100%')
28.     .width('100%')
29.   }
30. }

复制代码

效果如下：

1.2. Navigation + NavDestination + NavPathStack 实现组件跳转（API10）

首先显示的页面需要用Navigation包裹，其内书写的为首页内容。可以为其设置toolbarConfiguration属性实现类似Tabs组件的效果，设置title设置标题，设置titleMode属性设置标题模式等等。

1. @State activeName: string = 'tab1'
2.   build() {
3.     Navigation() {
4.       if (this.activeName === 'tab1') {
5.         NavigationCase1() // 切换的组件
6.       } else if (this.activeName === 'tab2') {
7.         NavigationCase2() // 切换的组件
8.       } else {
9.         Text('123')
10.       }
11.     }
12.     .height('100%')
13.     .width('100%')
14.     .toolbarConfiguration(this.tabBarBuilder) // 设置tabBar
15.     .navDestination(this.navDestination) // 设置路由容器
16.     .title(this.titleBuilder, {
17.       backgroundColor: Color.Blue,
18.     }) // 设置标题
19.     .titleMode(NavigationTitleMode.Full) // 标题模式
20.     .menus(this.NavigationMenus) // 顶部图标
21.     .hideTitleBar(false) // 是否隐藏标题栏
22.     .hideNavBar(false) // 是否隐藏导航栏, 隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。
23.     .backgroundColor(Color.Pink)
24.   }

复制代码

如果你想实现跳转，你需要为Navigation组件配置navDestination属性创建路由容器（大概说罗路由出口）。

NavDestination1与NavDestination2为跳转组件。

之后你需要配置NavPathStack页面栈举行跳转（你可以将其理解为控制器）

团体跳转思绪，首先展示的为tab切换页，tab1、tab2、tab3， tab1可以通过跳转NavDestination1按钮跳转到name为NavDestination1的页面（看路由容器），到NavDestination1页面，可以通过按钮跳转NavDestination2跳转到页面NavDestination2，这里携带了param参数，到页面NavDestination2可以通过页面栈NavPathStack中的getParamByName举行吸收。
注： 跳转的页面，必须由NavDestination组件包裹
具体demo代码：

1. //------------ NavigationCase主页面-----
2. import NavDestination1 from './components/NavDestination1'
3. import NavDestination2 from './components/NavDestination2'
4. import NavigationCase1 from './components/NavigationCase1'
5. import NavigationCase2 from './components/NavigationCase2'
7. @Entry
8. @Component
9. struct NavigationCase {
10.   @State activeName: string = 'tab1'
12.   // tabs
13.   @Builder
14.   tabBarBuilder() {
15.     Row() {
16.       ForEach(['tab1', 'tab2', 'tab3'], (item: string) => {
17.         Column() {
18.           Image($r('app.media.ic_public_message')).width(24).aspectRatio(1)
19.           Text(item).fontColor(this.activeName === item ? '#ff00ff0f' : '#000')
20.         }.onClick(() => {
21.           this.activeName = item
22.         })
23.       })
24.     }.width('100%').justifyContent(FlexAlign.SpaceAround)
25.   }
27.   // 标题
28.   @Builder
29.   titleBuilder() {
30.     Row() {
31.       Text('title').fontWeight(700)
32.     }
33.     .width('100%')
34.     .justifyContent(FlexAlign.Center)
35.   }
37.   // 顶部icon
38.   @Builder
39.   NavigationMenus() {
40.     Row() {
41.       Image($r('app.media.ic_public_contacts_group'))
42.         .width(24).aspectRatio(1)
43.       Image($r('app.media.ic_public_contacts_group'))
44.         .width(24)
45.         .height(24)
46.       Image($r('app.media.ic_public_contacts_group'))
47.         .width(24)
48.         .height(24)
49.     }.width('100%').justifyContent(FlexAlign.SpaceAround)
50.   }
52.   // 路由容器
53.   @Builder
54.   navDestination(name: string) {
55.     if (name === 'NavDestination2') {
56.       NavDestination2()
57.     } else if (name === 'NavDestination1') {
58.       NavDestination1()
59.     }
60.   }
62.   //路由栈, (控制跳转）
63.   @Provide
64.   navStack: NavPathStack = new NavPathStack()
66.   build() {
67.     Navigation(this.navStack) {
68.       if (this.activeName === 'tab1') {
69.         NavigationCase1()
70.       } else if (this.activeName === 'tab2') {
71.         NavigationCase2()
72.       } else {
73.         Text('123')
74.       }
75.     }
76.     .height('100%')
77.     .width('100%')
78.     .toolbarConfiguration(this.tabBarBuilder) // 设置tabBar
79.     .navDestination(this.navDestination) // 设置路由容器
80.     .title(this.titleBuilder, {
81.       backgroundColor: Color.Blue,
82.     }) // 设置标题
83.     .titleMode(NavigationTitleMode.Full) // 标题模式
84.     .menus(this.NavigationMenus) // 顶部图标
85.     .hideTitleBar(false) // 是否隐藏标题栏
86.     .hideNavBar(false) // 是否隐藏导航栏, 隐藏Navigation的导航栏，包括标题栏、内容区和工具栏。
87.     .backgroundColor(Color.Pink)
88.   }
89. }
91. // ------------- NavigationCase1 : tab页面1 --------------
92. @Component
93. struct NavigationCase1 {
94.   @Consume navStack: NavPathStack
96.   build() {
97.     Column() {
98.       Text('tab1')
99.       Button('跳转NavDestination1').onClick((event: ClickEvent) => {
100.         this.navStack.pushPath({
101.           name: 'NavDestination1'
102.         })
103.       })
104.     }
105.   }
106. }
108. export default NavigationCase1
110. // ------------- NavigationCase1 : tab页面2 --------------
111. @Component
112. struct NavigationCase2 {
113.   build() {
114.     Column() {
115.       Text('tab2')
116.     }
117.   }
118. }
120. export default NavigationCase2
122. // -----------跳转页面1 -----------------
123. @Component
124. struct NavDestination1 {
125.   @Consume navStack: NavPathStack
127.   build() {
128.     NavDestination() {
129.       Column() {
130.         Text('页面1')
131.         Button('跳转NavDestination2').onClick(() => {
132.           const param: Record<string, string> = {
133.             'dec': '跳转NavDestination2'
134.           }
135.           this.navStack.pushPath({
136.             name: 'NavDestination2',
137.             param
138.           })
139.         })
140.       }
141.     }.title('页面1')
142.   }
143. }
145. export default NavDestination1
147. // -----------跳转页面2 -----------------
148. import { promptAction } from '@kit.ArkUI'
150. @Component
151. struct NavDestination2 {
152.   @Consume navStack: NavPathStack
154.   aboutToAppear(): void {
155.     promptAction.showDialog({
156.       message: JSON.stringify(this.navStack.getParamByName('NavDestination2'))
157.     })
158.   }
160.   build() {
161.     NavDestination() {
162.       Column() {
163.         Text('页面2')
164.       }
165.     }.title('页面2').hideTitleBar(true)
167.   }
168. }
170. export default NavDestination2

复制代码

2. 页面跳转

通过NavPathStack控制页面路由，实现跳转，返回，移除页面栈等
2.1 普通跳转
普通跳转，通过页面的name去跳转，并可以携带param。
   

• this.pageStack.pushPath({ name: "ageOne", param: "ageOne Param" })
  
• this.pageStack.pushPathByName("ageOne", "ageOne Param")
  

   2.2 带返回回调的跳转，跳转时添加onPop回调，能在页面出栈时获取返回信息，并举行处理处罚。
 

1. this.pageStack.pushPathByName('PageOne', "PageOne Param", (popInfo) => {
2. console.log('Pop page name is: ' + popInfo.info.name + ', result: ' + JSON.stringify(popInfo.result))
3. });

复制代码

2.3 带错误码的跳转，跳转结束会触发异步回调，返回错误码信息。

1. this.pageStack.pushDestinationByName('PageOne', "PageOne Param")
2. .catch((error: BusinessError) => {
3.     console.error(`Push destination failed, error code = ${error.code}, error.message = ${error.message}.`);
4. }).then(() => {
5. console.error('Push destination succeed.');
6. });

复制代码

3. 参数获取

1. // size: 获取页面栈大小
2. this.pageStack.size()
3. // 获取栈中所有页面name集合
4. // 获取【栈中】所有NavDestination页面的名称。
5. this.pageStack.getAllPathName()
6. // 获取【指定index】的NavDestination页面的参数信息。
7. this.pageStack.getParamByIndex(index)
8. // 获取全部name为PageOne的NavDestination页面的参数信息。
9. this.pageStack.getParamByName("PageOne")
10. // 获取全部name为PageOne的NavDestination页面的位置索引。
11. this.pageStack.getIndexByName("PageOne")

复制代码

4. 页面返回、替换、删除

1. // 返回到上一页
2. this.pageStack.pop()
3. this.pageStack.removeByIndexes([this.pageStack.size-1])
4. // 返回到上一个PageOne页面
5. this.pageStack.popToName("PageOne")
6. // 返回到索引为1的页面
7. this.pageStack.popToIndex(1)
8. // 返回到根首页（清除栈中所有页面）
9. this.pageStack.clear()
11. // 将栈顶页面替换为PageOne
12. this.pageStack.replacePath({ name: "PageOne", param: "PageOne Param" })
13. this.pageStack.replacePathByName("PageOne", "PageOne Param")
15. // 删除栈中name为PageOne的所有页面
16. this.pageStack.removeByName("PageOne")
17. // 删除指定索引的页面
18. this.pageStack.removeByIndexes([1,3,5])

复制代码

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