HarmonyOS初识ArkUI快速实现页面导航之Navigation

JAY.LIN 收录于未分类

2023-11-24 约 911 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=134594032

【关键字】

HarmonyOS、ArkUI、Navigation、自定义导航栏、底部导航

1、写在前面

今天继续来介绍如何通过ArkUI来实现应用中常见的导航效果——底部导航，上一篇中介绍了Tabs的实现方式，今天来介绍另一种组件Navigation，参考文档：

2、开发实战

关于基本概念就不再多做介绍了，有需要的直接点击上面的链接进行了解即可，我们直接进入正题。

首先，新建一个变量，用来表示当前页的索引：

然后同样的我们借助Builder装饰器的方式来自定义菜单栏和工具栏，首先来实现菜单栏：

这里我们通过一个横向的线性布局内部包裹3个Image组件，来展示页面顶部右上角的菜单按钮：

接着我们以类似的方式来实现底部的3个导航按钮，这里使用横向的线性布局Row来包裹3个导航按钮，每个导航按钮通过纵向的线性布局Column来实现，Column内部按照上图下文的形式排列，如下所示：

最后在Navigation组件的相关属性中将上面自定义的Builder设置进去即可，这里我们设置了标题、页面显示模式、标题栏模式、菜单栏、工具栏，并且隐藏页面的返回按钮：

核心内容到这里就已经介绍完了，下面附上完整的代码，便于大家查看和理解：

@Entry
@Component
struct NavPage {
  @State index: number = 0

@Builder NavigationMenus() { // CustomBuilder 类型的菜单栏
Row() {
Image($r('app.media.icon_search'))
        .size({ width: 24, height: 24 })
      Image($r('app.media.icon_add'))
.size({ width: 24, height: 24 })
.margin({ left: 5 })
Image($r('app.media.icon_more'))
.size({ width: 24, height: 24 })
.margin({ left: 5 })
}.justifyContent(FlexAlign.End)
}

@Builder NavigationToolbar() { // CustomBuilder 类型的 toolbar
Row() {
Column() {
Image(this.index == 0 ? $r('app.media.icon_indexed') : $r('app.media.icon_index'))
.size({ width: 25, height: 25 })
Text('首页')
.fontSize(16)
.fontColor(this.index == 0 ? "#28bff1" : "#8a8a8a")
}
.alignItems(HorizontalAlign.Center)
.height('100%')
.layoutWeight(1)
.onClick(() => {
this.index = 0;
})

      Column() {
        Image(this.index == 1 ? $r('app.media.icon_listed') : $r('app.media.icon_list'))
          .size({ width: 25, height: 25 })
        Text('列表')
          .fontSize(16)
          .fontColor(this.index == 1 ? "#28bff1" : "#8a8a8a")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 1;
      })

      Column() {
        Image(this.index == 2 ? $r('app.media.icon_othered') : $r('app.media.icon_other'))
          .size({ width: 25, height: 25 })
        Text('更多')
          .fontSize(16)
          .fontColor(this.index == 2 ? "#28bff1" : "#8a8a8a")
      }
      .alignItems(HorizontalAlign.Center)
      .height('100%')
      .layoutWeight(1)
      .onClick(() => {
        this.index = 2;
      })
    }
    .width('100%')
    .height(50)
    .alignItems(VerticalAlign.Center)

}

build() {
Column() {
Navigation(){
Text(this.index == 0 ? "首页" : this.index == 1 ? "列表" : "更多")
.textAlign(TextAlign.Center)
.fontSize(30)
.size({ width: '100%', height: '100%' })
.backgroundColor('#ffd4e9ee')
}
.title("ArkUI")
.mode(NavigationMode.Stack)
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)
.menus(this.NavigationMenus())
.toolBar(this.NavigationToolbar())
.size({ width: '100%', height: '100%' })
}
.width('100%')
.height('100%')
}
}

3、实现效果

通过上面的代码就可以利用 Navigation 来实现底部导航啦，最后来一起看一下咱们的实现效果吧：

OK，本期内容就到这里啦，下期再会！

目录

HarmonyOS初识ArkUI快速实现页面导航之Navigation

【HarmonyOS】初识ArkUI——快速实现页面导航之Navigation