鸿蒙应用开发-Tabs组件和Navigation组件的区别和应用

八青妹
717 阅读4分钟

1. 前言

在初接触鸿蒙开发应用中Tabs组件和Navgation组件的时候，就联想到了在前端开发中的Tabs标签页和NavMenu导航菜单，都是组件导航，那么鸿蒙开发中Tabs组件和Navgation组件的使用场景有什么区别，弄清楚这些再来进一步学习如何使用该组件来搭建想要的界面。

2. 理解Tabs组件

2.1 前端常用Tabs标签组件的作用

关于在web管理系统的页面中，前端常常使用Tabs标签来做表格的切换。或者是在一个页面中，对不同的子组件进行切换展示。

image.png

在适配手机的h5页面中，会使用tab来做底部的导航栏。例如在vant-ui中的Tabbar组件，如下图所示。

image.png

2.2 HarmonyOS中Tabs组件的作用

在HarmonyOS开发课程中是如下描述Tabs组件的作用：

当页面信息较多时，为了让用户能够聚焦于当前显示的内容，需要对页面内容进行分类，提高页面空间利用率。Tabs组件可以在一个页面内快速实现视图内容的切换，一方面提升查找信息的效率，另一方面精简用户单次获取到的信息量。

image.png

通过该布局示意图，能清晰的知道Tabs的作用。

3.理解Navgation组件

3.1 前端常用的Navgation组件作用场景

在前端开发中，常常称其为导航菜单，例如ant-design中的导航布局之一如下所示：

image.png

web开发中常常会用到导航菜单，用户依赖导航在各个页面中进行跳转，导航提供多级结构来收纳和排列网站架构。

3.2 HarmonyOS中Navgation组件的作用场景

在vant-ui中没有Navigation组件,通过Tabbar组件和路由路来实现了导航功能。那HarmonyOS中Navgation组件的特别之处在哪里呢？

在 HarmonyOS 中，Navigation 组件主要用于实现页面之间的导航，提供一种用户友好的方式来管理和切换不同的视图。所以跟web不同，并不是特地用来实现菜单导航的功能的哟。Navigation是路由容器组件，一般作为首页的根容器。

使用场景

  • 复杂应用结构: 当应用具有复杂的层级结构，如设置、详情页、用户信息等，需要用户在不同页面之间进行导航时。
  • 多步骤流程: 在需要多步骤操作的场景中，如表单填写、支付流程等，用户可以通过 Navigation 组件逐步完成任务。
  • 内容丰富的应用: 在内容较多的应用中，用户需要频繁浏览不同页面，Navigation 组件提供了良好的用户体验。

4. HarmonyOS中Tabs组件的使用

Tabs组件的页面组成是包含了两个部分

  • TabBar：导航页签栏，也就是导航菜单，可以置于顶部、底部或侧边。
  • TabContent：内容页

接下来我们实现一个类似微信的菜单布局吧

image.png

在切换底部菜单的时候，高亮当前点击的菜单文字，切换为高亮的图片。并将顶部的文字进行同步更改。微信顶部栏的文字与当前底部高亮的文字是同步的。

  • 定义当前点击的索引为0,也就是第一个菜单；
  • 定义下面四个菜单栏的文字信息
  • 准备好8张图片
@State currentIndex:number =0;
@State tabTitleArray:string[]=["微信","通讯录","发现","我的"]
image.png

图片存放于AppScope/resources/base/media目录下，用$r(' app.media.chat_selected')引用。

完整代码如下：

@Entry
@Component
export struct Index{
  @State message: string = '微信';
  @State currentIndex:number =0;
  @State tabTitleArray:string[]=["微信","通讯录","发现","我的"]
  
  @Builder
  tabBuilder(title:string,targetIndex:number,selectedImg:Resource,normalImg:Resource){
    Column(){
      Image(this.currentIndex===targetIndex?selectedImg:normalImg)
        .size({width:25,height:25})
      Text(title)
        .fontColor(this.currentIndex===targetIndex?'#06c05f':'#6B6B6B')
        .fontSize(12)
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
    .backgroundColor("#ebebef")
  }
  build(){
    Column() {
       Text(this.message)
                .fontSize(18)
                .fontWeight(500)
                .textAlign(TextAlign.Center)
                .fontFamily('HarmonyHeiTi-Bold')
                .lineHeight(30)
         .width(100)

      Tabs({ barPosition: BarPosition.End }) {
        TabContent() {
          Text('聊天内容')
        }
        .tabBar(this.tabBuilder(this.tabTitleArray[0],0,$r('app.media.chat_selected'),$r('app.media.chat_normal')))

        TabContent() {
          Text('通讯录内容')
        }
        .tabBar(this.tabBuilder(this.tabTitleArray[1],1,$r('app.media.contacts_selected'),$r('app.media.contacts_normal')))

        TabContent() {
          Text('发现的内容')
        }
        .tabBar(this.tabBuilder(this.tabTitleArray[2],2,$r('app.media.discover_selected'),$r('app.media.discover_normal')))

        TabContent() {
          Text('我的内容')
        }
        .tabBar(this.tabBuilder(this.tabTitleArray[3],3,$r('app.media.mine_selected'),$r('app.media.mine_normal')))
      }
      .animationDuration(0)
      .onChange((index:number)=>{
         this.currentIndex=index
        //顶部标题同步底部菜单名称
        this.message=this.tabTitleArray[index]
      })
    }
  }
}

这里通过Tabs提供的onChange事件方法，监听索引index的变化，并将当前活跃的index值传递给currentIndex，实现页签的切换。在页签切换的同时，更改顶部标题文字。

5. HarmonyOS中Navigation组件的使用

Navigation组件适用于模块内页面切换，可以通过组件级路由能力实现更加自然流畅的转场体验。

Navigation包含首页内容和非首页内容，首页中主要实现导航栏的功能，非首页主要显示跳转后的内容

Navigation支持的跳转方式主要有两种，分别为push的方式与replace的方式。

  • pushPath()/pushPathByName()：根据传入的参数将参数对应的NavDestination页面信息入栈。
  • replacePath()/replacePathByName()：将当前页面栈栈顶退出，再根据传入参数将对应的NavDestination页面信息入栈。

实现Navigation的方式将另外单独放在一篇文章中详细介绍。鸿蒙应用开发-Navigation组件导航的使用

6. 总结

实现Tabs组件和Navigation组件的搭建，犹如写文章中先列好目录框架。这是交互当中的第一步，必不可少。所以在学习到这里的时候，八青妹才体会到这是入门鸿蒙开发的第一步。什么时候使用Tab组件，什么时候使用Navigation,根据各项目需求而定，定好框架，对号入座，用于导航栏且嵌套流程较多的，建议Navigation,仅仅用作内容切换，那就使用简易的Tab吧。

avatar
文章
阅读
粉丝