【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation
【关键字】
HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航
1、写在前面
今天继续来介绍如何通过ArkUI来实现应用中常见的导航效果——底部导航,上一篇中介绍了Tabs的实现方式,今天来介绍另一种组件Navigation,参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-navigation-navigation-0000001453365116-V3
2、开发实战
关于基本概念就不再多做介绍了,有需要的直接点击上面的链接进行了解即可,我们直接进入正题。
首先,新建一个变量,用来表示当前页的索引:
然后同样的我们借助Builder装饰器的方式来自定义菜单栏和工具栏,首先来实现菜单栏:
这里我们通过一个横向的线性布局内部包裹3个Image组件,来展示页面顶部右上角的菜单按钮:
接着我们以类似的方式来实现底部的3个导航按钮,这里使用横向的线性布局Row来包裹3个导航按钮,每个导航按钮通过纵向的线性布局Column来实现,Column内部按照上图下文的形式排列,如下所示:
最后在Navigation组件的相关属性中将上面自定义的Builder设置进去即可,这里我们设置了标题、页面显示模式、标题栏模式、菜单栏、工具栏,并且隐藏页面的返回按钮:
核心内容到这里就已经介绍完了,下面附上完整的代码,便于大家查看和理解:
3、实现效果
通过上面的代码就可以利用Navigation来实现底部导航啦,最后来一起看一下咱们的实现效果吧:
OK,本期内容就到这里啦,下期再会!