鸿蒙HarmonyOS开发实战：导航组件封装与使用-tabs

前言

主页的底部导航以及页面顶部的切换导航，无论哪个系统，哪个App，都是最常见的功能之一，虽然说在鸿蒙中有现成的组件tabs可以很快速的实现，但是在使用的时候，依然有几个潜在的问题存在，第一，当导航较少时，tabs是默认居中模式，目前无法进行居左，在有这样功能的时候，难以满足需求；第二，导航右侧需要展示按钮的时候，tabs也是无法满足的；除此之外，还有很多人都非常关心的问题，底部的指示器可以跟随页面的滑动而滑动；面对着种种问题的存在，系统的tabs改进之路仍然很艰巨。

一、封装tabs效果及基本使用

所有的效果都是基于tabs组件进行拓展的。

（功能项）

（底部Tab）

(普通导航)

（居左导航）

（右边按钮）

以上就是封装后的部分效果，目前已经上传到了远程仓库，大家可以按照以下的方式进行使用。

方式一：在Terminal窗口中，执行如下命令安装三方包，DevEco Studio会自动在工程的oh-package.json5中自动添加三方包依赖。

ohpm install @abner/tab

方式二：在工程的oh-package.json5中设置三方包依赖，配置示例如下：

"dependencies": { "@abner/tab": "^1.0.0"}

1、底部导航案例

相关效果：

代码实现：

@Entry
@Component
struct BottomTabPage1 {
  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:tab对应的页面
   * @param index 索引
   * @param item TabBar对象，非必须
   * */
  @Builder
  itemPage(index: number, item: TabBar) {
    Text(item.title)
  }

build() {
    Column() {
      ActionBar({ title: "底部导航案例一" })

      BottomTabLayout({
        itemPage: this.itemPage,//tab对应的页面
        tabSelectedColor: "#D81E06",//文字未选择颜色
        tabNormalColor: Color.Black,//文字未选择颜色
        tabLabelMarginTop: 10,//文字距离图片的高度
        tabScrollable: true,//是否可以滑动
        tabMarginBottom: 30, //距离底部的距离，一般可以获取底部导航栏的高度，然后进行设置
        onChangePage: (position) => {
          //页面切换
        },
        onTabBarClick: (position) => {
          //tab点击
        },
        tabBar: [
          new TabBar("首页", $r("app.media.ic_home_select"), $r("app.media.ic_home_unselect")),
          new TabBar("网络", $r("app.media.ic_net_select"), $r("app.media.ic_net_unselect")),
          new TabBar("列表", $r("app.media.ic_list_select"), $r("app.media.ic_list_unselect")),
          new TabBar("组件", $r("app.media.ic_view_select"), $r("app.media.ic_view_unselect"))
        ]
      })
    }.height("100%")
}
}

相关属性

属性	类型	概述
itemPage	BuilderParam	tab对应得页面
tabSelectedColor	ResourceColor	tab选中颜色
tabNormalColor	ResourceColor	tab未选中颜色
tabSelectedBgColor	ResourceColor	选中背景颜色
tabNormalBgColor	ResourceColor	未选中背景颜色
tabIconWidth	number	图片icon的宽度，默认20
tabIconHeight	number	图片icon的高度&#x