0
点赞
收藏
分享

微信扫一扫

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

mm_tang 2023-11-24 阅读 23

【关键字】

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

1、写在前面

今天继续来介绍如何通过ArkUI来实现应用中常见的导航效果——底部导航,上一篇中介绍了Tabs的实现方式,今天来介绍另一种组件Navigation,参考文档:https://developer.harmonyos.com/cn/docs/documentation/doc-guides-V3/arkts-navigation-navigation-0000001453365116-V3

2、开发实战

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

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

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

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

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

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

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

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

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

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

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

@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%')
  }
}

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

3、实现效果

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

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

OK,本期内容就到这里啦,下期再会!


举报

相关推荐

0 条评论