【鸿蒙实战开发】用Navigation实现页面切换

本日在利用国民级应用微信的时候发现微信的底部设计真是符合用户的利用习惯，通过底部按钮的切换就可以在同一块结构上展示不同的界面内容，大大进步了页面的利用率，同时减少用户点击跳转切换的频率，进步了用户体验，可以看到微信的实现页面如下

可以看到通过底部按钮的切换，从而带动上半部页面的切换，同时点击时底部按钮和字体的颜色同时发生改变。 这种高服从的页面设计，别人有！！
鸿蒙固然也有！！

1. 那么在HarmoneyOS中要实现这样的效果，应该怎么做呢？
3. 让我们码上行动！！
5. Let’s GO!

复制代码

需求分析

起首我们可以看到页面被分为上下两部门，分别是底部地区和上半部门显示地区，上部控制视图页面和组件的显示，放工部门是按钮的点击切换，这个应用场景正适合利用我们的 组件导航 (Navigation)
什么是Navigation？

1.​​Navigation​​是路由容器组件，一般作为首页的根容器
2.Navigation组件实用于模块内和跨模块的路由切换
3.通过组件级路由能力实现更加自然流通的转场体验，并提供多种标题栏样式来呈现更好的标题和内容联动效果
示意图如下

通过利用navigation 我们就能很轻松的实现如许的效果
代码实现

起首必要在页面的根结构容器中添加navigation组件而且设置相应的属性，让他更贴合我们的利用

1. Navigation() {
3.       }
4.       .toolBar()
5.       .hideTitleBar(true)
6.       .hideToolBar(false)
7.       .mode(NavigationMode.Auto)

复制代码

可以看到有一个toolBar这个toolbar 加载一个自定义结构，在这里通过创建一个数组对象来实现底部按钮以及字体的填充，对数组下标的判断来实现切换时候的图片、字体资源的切换（代码实现如下）
数据源

1. @State Build: Array<ESObject> = [
2.     {
3. 首页',
4.       num: 0
5.     },
6.     {
7. 视频',
8.       num: 1
9.     },
10.     {
11. 我的',
12.       num: 2
13.     }
14.   ]
16. 布局数据的填充
17. @Builder NavigationToolbar() {
18.     Row() {
19.       ForEach(this.Build, (item:ESObject) => {
20.         Column() {
21.           if (item.num==0) {
22.             Image(this.currentIndex == 0 ? $r('app.media.home_check') : $r('app.media.home_not_check'))
23.               .width(24)
24.               .height(24)
25.           }
26.           if (item.num==1) {
27.             Image(this.currentIndex == 1 ? $r('app.media.video_check') : $r('app.media.video_not_check'))
28.               .width(24)
29.               .height(24)
30.           }
31.           if (item.num==2) {
32.             Image(this.currentIndex == 2 ? $r('app.media.mine_check') : $r('app.media.mine_not_check'))
33.               .width(24)
34.               .height(24)
35.           }
36.           Text(item.text)
37.             .fontColor(this.currentIndex == item.num ? Color.Black : Color.Black)
38.             .fontSize(14)
39.             .lineHeight(14)
40.             .fontWeight(500)
41.             .margin({ top: 3 })
42.         }
43.         .padding({top:8})
44.         .height(56)
45.         .onClick(() => {
46.           this.currentIndex = item.num
47.         })
48.       })
49.     }
50.     .justifyContent(FlexAlign.SpaceAround)
51.     .height(56)
52.     .width("100%")
53.     .backgroundColor(Color.White)
54.   }

复制代码

完成之后把创建的NavigationToolbar 放如toolBar中，同时在资源文件列表下放入切换的图片

生存代码后当前页面实现如下图所示

可以看到我们的底部结构已经显示出来了，通过利用this.currentIndex == item.num来进行三目运算符的判断，来对资源文件和字体颜色进行切换
this.currentIndex == 0 ? $r(‘app.media.home_check’) : $r(‘app.media.home_not_check’)
fontColor(this.currentIndex == item.num ? “#ff9c61fc” : Color.Black)
底部的按钮切换完成后必要根据点击不同的按钮来切换相应的页面，我们来创建新的测试页面

起首创建一个名为OnePage 的页面，而且利用export对这页面进行修饰，使外部可以通过引用找到他

1. @Entry
2. @Component
3. export struct OnePage {
4. @State message: string = '首页';
6. build() {
7. RelativeContainer() {
8. Text(this.message)
9. .id('OnePageHelloWorld')
10. .fontSize(50)
11. .fontWeight(FontWeight.Bold)
12. .alignRules({
13. center: { anchor: '__container__', align: VerticalAlign.Center },
14. middle: { anchor: '__container__', align: HorizontalAlign.Center }
15. })
16. }
17. .height('100%')
18. .width('100%')
19. }
20. }

复制代码

空页面显示如下
然后回到navigation中通过下标来进行页面的引入

1. Navigation() {
2.         if (this.currentIndex==0){
3.           OnePage()
4.         }
5.         if (this.currentIndex==1){
6.           OnePage()
7.         }
8.         if (this.currentIndex==2){
9.           OnePage()
10.         }
11.       }
12.       .toolBar(this.NavigationToolbar)
13.       .hideTitleBar(true)
14.       .hideToolBar(false)
15.       .mode(NavigationMode.Auto)

复制代码

如今就实现了navigation的底部点击切换页面效果

写在末了

●如果你以为这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
●点赞，转发，有你们的 『点赞和批评』，才是我创造的动力。
●关注小编，同时可以期待后续文章ing