HamornyOS Navigation的基本使用

tabbar
当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换

Navigation

1. 适用于模块内页面切换，通过组件级路由能力实现更加自然流畅的转场体验
2. 通过Tabs我们构建了页面之间平级的切换，但对于一些需要点击进入下一层级的页面，例如点击列表项进入列表项的详情页，这种还需要借助Navigation实现
3. Navigation包含首页内容和非首页内容，首页中主要实现导航栏的功能，非首页主要显示跳转后的内容
4. Navigation有属于自己的路由栈，可以用于路由的前进、回退、路由历史记录的保存、路由参数的保存与获取
5. 在Navigation中使用的Scroll()组件，可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动

Navigation的使用步骤：

//定义路由栈
@Provide('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack = new NavPathStack();

//定义跳转目的地
@Builder
PageMap(name: string) {
...
}

//主页面封装build（）函数里面的内容
1. build() {
2. Navigation() {
3. Scroll(){
4. ...
5.     }
6. ...
7.   }
8. .hideTitleBar(true)
9. }

//路由栈作为Navigation组件的参数传递
1. build() {
2. Navigation(this.knowledgeMapPageStack) {
3. ...
4.     }
5. ...
6. }

//关联NavDestination组件与Navigation组件
1. build() {
2. Navigation(this.knowledgeMapPageStack) {
3. ...
4.     }
5. ...
6. .navDestination(this.PageMap)
7. }

//控制导航栏显示模式，有Auto Stack Split三种方式
1. build() {
2. Navigation(this.knowledgeMapPageStack) {
3. ...
4.     }
5. .mode(NavigationMode.Stack)
6. ...
7. }

//实现路由跳转，给主页面的每个选项添加点击事件，有两种跳转方式
//pushPath()/pushPathByName()：根据传入的参数将参数对应的NavDestination页面信息入栈
//replacePath()/replacePathByName()：将当前页面栈栈顶退出，再根据传入参数将对应的NavDestination页面信息入栈
1. @Component
2. export struct NavBarItem {
3. @Consume('knowledgeMapPageStack') knowledgeMapPageStack: NavPathStack;
4. ...
5. build() {
6. Row() {
7. ...
8. }
9. ...
10. .onClick(() => {
11. this.knowledgeMapPageStack.replacePath({ name: 'KnowledgeMapContent' });
12.     })
13. }}

//方便用户感受点击事件的话，可以为主页面的每个选型添加点击时背景变暗的特性，可以省略

//在主页面中，向路由子组件传递数据
1. @Builder
2. PageMap(name: string) {
3. if (name === '页面名称') {
4.     页面名称({ section: this.sections[this.currentNavBarIndex] });
5.   }
6. }