HarmonyOs开发：导航tabs组件封装与使用

前言

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

本篇的文章内容如下：

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

2、主要的封装实现分析

3、开源地址

4、相关总结

一、封装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的高度，默认20

tabSize

number

tab文字大小

tabWeight

number /FontWeight / string

文字权重

tabLabelMarginTop

number

标签距离图片的高度

tabBar

Array<TabBar>

tab数据源

tabWidth

Length

tab指示器的宽度

tabHeight

number

tab指示器的高度，默认56

currentIndex

number

当前索引，默认是第一个

onChangePage

回调方法

页面切换监听

onTabBarClick

tab点击回调

tab点击监听

tabScrollable

boolean

是否可滑动，默认不可以滑动

tabMarginBottom

number

tab距离底部的距离

2、底部导航案例2，自定义Tab视图

相关效果：

代码实现：

@Entry
@Component
struct BottomTabPage2 {
  private currentIndex = 0 //默认是第一个

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

/**
 * AUTHOR:AbnerMing
 * INTRODUCE:自定义Tab视图，自己绘制
 * @param index 索引
 * @param item TabBar对象，非必须
 * */
@Builder
itemTab(index: number, item: TabBar) {
    Column() {
      Image(this.currentIndex == index ? item.selectedIcon
        : item.normalIcon)
        .width(30).height(30)
      Text(item.title)
        .fontColor(this.currentIndex == index ? "#D81E06" : "#000000")
        .fontSize(14)
        .margin({ top: 5 })
    }.width("100%")
}

build() {
    Column() {
      ActionBar({ title: "底部导航案例二" })
      BaseBottomTabLayout({
        itemPage: this.itemPage,
        itemTab: this.itemTab,
        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"))
        ],
        tabMarginBottom: 30, //距离底部的距离，一般可以获取底部导航栏的高度，然后进行设置
        onTabBarClick: (position) => {
          //tab点击
          console.log("====点击了Tab" + position)
        },
        onChangePage: (position) => {
          //页面切换
          console.log("====页面切换了" + position)
        }
      })
    }
}
}

相关属性

属性

类型

概述

itemPage

BuilderParam

tab对应得页面

tabSelectedColor

ResourceColor

tab选中颜色

tabNormalColor

ResourceColor

tab未选中颜色

tabSelectedBgColor

ResourceColor

选中背景颜色

tabNormalBgColor

ResourceColor

未选中背景颜色

tabIconWidth

number

图片icon的宽度，默认20

tabIconHeight

number

图片icon的高度，默认20

tabSize

number

tab文字大小

tabWeight

number /FontWeight / string

文字权重

tabLabelMarginTop

number

标签距离图片的高度

tabBar

Array<TabBar>

tab数据源

tabWidth

Length

tab指示器的宽度

tabHeight

number

tab指示器的高度，默认56

currentIndex

number

当前索引，默认是第一个

onChangePage

回调方法

页面切换监听

onTabBarClick

tab点击回调

tab点击监听

tabScrollable

boolean

是否可滑动，默认不可以滑动

tabMarginBottom

number

tab距离底部的距离

isMarginBottom

boolean

默认开启，tab距离底部的距离

3、普通指示器导航

相关效果：

代码实现：

@Entry
@Component
struct TabLayoutPage1 {
  @Builder
  itemPage(index: number, item: string) {
    Text(item)
  }

  build() {
    Column() {
      ActionBar({ title: "封装导航【普通】" })
      TabLayout({
        tabBar: ["条目一", "条目二"],
        itemPage: this.itemPage,
        tabAttribute: (tab) => {
          //设置属性

        },
        onChangePage: (position) => {
          //页面改变
          console.log("页面改变:" + position)
        },
        onTabBarClick: (position) => {
          //点击改变
          console.log("点击改变:" + position)
        }
      })
    }
  }
}

相关属性

属性

类型

概述

tabWidth

Length

tab指示器的宽度

tabHeight

number

tab指示器的高度

onChangePage

回调方法(position: number)

页面改变回调

currentIndex

number

当前索引，默认第0个

tabScrollable

boolean

是否可以滑动切换页面，默认可以滑动

tabBar

Array<string>

数据源

itemPage

回调方法BuilderParam (index: number, item: string)

tab对应得页面

tabAttribute

回调方法(attribute: TabModel)

设置tab相关属性

isHideDivider

boolean

是否隐藏下划线，默认展示

isTabAlignLeft

boolean

是否从最左边开始，默认不是

barMode

BarMode

是均分还是可滑动，默认滑动

onTabBarClick

回调方法(position: number)

tab点击回调

isShowTabMenu

boolean

是否展示右边的按钮选项，默认不展示

tabMenu

回调方法BuilderParam

右边展示的按钮视图

tabMenuWidth

number

tab右侧按钮的宽度

tabMenuMarginRight

number

tab按钮距离右侧的距离

4、普通指示器导航【均分】

相关效果：

代码实现：

@Entry
@Component
struct TabLayoutPage2 {
  @Builder
  itemPage(index: number, item: string) {
    Text(item)
  }

  build() {
    Column() {
      ActionBar({ title: "封装导航【均分】" })
      TabLayout({
        tabBar: ["条目一", "条目二", "条目三", "条目四"],
        barMode: BarMode.Fixed, //均分
        itemPage: this.itemPage,
        tabAttribute: (tab) => {
          //设置属性

        },
        onChangePage: (position) => {
          //页面改变
          console.log("页面改变:" + position)
        },
        onTabBarClick: (position) => {
          //点击改变
          console.log("点击改变:" + position)
        }
      })
    }
  }
}

相关属性

同上。

5、普通指示器导航【居左】

相关效果：

代码实现：

@Entry
@Component
struct TabLayoutPage4 {
  @Builder
  itemPage(index: number, item: string) {
    Text(item)
  }

  build() {
    Column() {
      ActionBar({ title: "封装导航【居左】" })
      TabLayout({
        tabBar: ["条目一", "条目二"],
        isTabAlignLeft: true,
        itemPage: this.itemPage,
        tabAttribute: (tab) => {
          //设置属性

        },
        onChangePage: (position) => {
          //页面改变
          console.log("页面改变:" + position)
        }
      })
    }
  }
}

相关属性

同上。

6、普通指示器导航【右边添加按钮】

相关效果：

代码实现：

@Entry
@Component
struct TabLayoutPage6 {
  @Builder
  itemPage(index: number, item: string) {
    Text(item)
  }

  /**
   * AUTHOR:AbnerMing
   * INTRODUCE:右侧的按钮，可以是任何的视图
   * */
  @Builder
  itemMenu() {
    Text("测试")
      .backgroundColor(Color.Pink)
      .width("100%")
      .height("100%")
      .textAlign(TextAlign.Center)
  }

  build() {
    Column() {
      ActionBar({ title: "封装导航【居左滑动】" })
      TabLayout({
        tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
        isTabAlignLeft: true,
        itemPage: this.itemPage,
        isShowTabMenu: true, //展示右侧的按钮
        tabMenu: this.itemMenu, //按钮
        tabMenuWidth: 100, //按钮宽度
        tabAttribute: (tab) => {
          //设置属性

        },
        onChangePage: (position) => {
          //页面改变
          console.log("页面改变:" + position)
        }
      })
    }
  }
}

相关属性

同上。

二、主要的封装实现分析

大部分的封装都是基于系统提供的Api实现的，无非就是简化了相关代码，基本上都不难，大家可以直接查看源码即可，这里重点说下普通导航的居左效果。

在文章开头的时候已经阐述，目前的tabs是不支持居左的，如果要实现居左的效果，就要自己自定义，这里使用的是横向的List组件实现的，通过Scroller来控制滑动距离。

List({ scroller: this.scroller }) {
            ForEach(this.tabBar, (item: string, index: number) => {
              ListItem() {
                this.tabItem(index, item)
              }.height(this.tabHeight)
              .onClick(() => {
                //条目点击
                if (this.isTabAlignLeft) {
                  //自定义滑动
                  if (index > this.currentIndex) {
                    this.scroller.scrollBy(20 * (index + 1), 0)
                  } else {
                    this.scroller.scrollBy(-20 * (this.tabBar.length - index), 0)
                  }
                }
                this.currentIndex = index
              })
            }, (item: string) => item)
          }
          .listDirection(Axis.Horizontal)
          .width(this.tabListWidth)
          .height(this.tabHeight)
          .scrollBar(BarState.Off)

需要注意的是，如果采用居左的效果，那么系统的tabBar我们就要舍弃，如下代码，如果居左，采用上述自定义tabBar，否则采用系统自定义的。

//使用tabBar对象形式传递
        if (this.isTabAlignLeft) {
          ForEach(this.tabBar, (item: string, index) => {
            TabContent() {
              this.itemPage(index, item)
            }
          })
        } else {
          ForEach(this.tabBar, (item: string, index) => {
            TabContent() {
              this.itemPage(index, item)
            }.tabBar(this.tabItem(index, item))
          })
        }

至于右侧的按钮布局，其实和自定义tabBar一致，采用的是RelativeContainer组件，包裹住按钮组件和tabBar组件即可，当然了，更多的代码，大家还是查看源码比较好，代码里的注释写的比较详细。

三、开源地址

地址中也有详细的使用概述：

https://ohpm.openharmony.cn/#/cn/detail/@abner%2Ftab

四、相关总结

指示器随着手势滑动，系统中的Api是支持的，但是需要实现的代码量很多，而且模式只支持Fixed，那么在导航条目较多的情况下，这个模式是很不符合需求的，当然了，我也在一步一步优化中，也希望在较短的时间内可以实现，大家可以持续关注。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/559688.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

12. MyBatis(二)

12. MyBatis(二)

源码位置&#xff1a;MyBatis_demo 上篇文章我们学习了MyBatis的定义以及增删查改操作&#xff0c;并且学习了如何在xml文件中编写SQL时使用#{}的方式将参数和对象的属性映射到SQL语句中&#xff0c;上篇的内容已经足以应对大部分场景&#xff0c;本篇文章我们就要学习一下MyBa…
阅读更多...
测绘管理与法律法规 | 测绘资质管理办法 | 学习笔记

测绘管理与法律法规 | 测绘资质管理办法 | 学习笔记

目录 一、测绘资质概述 二、测绘资质分类与等级 三、审批与管理 四、申请条件 五、审批程序 六、测绘资质证书 七、监督管理 八、违规处理 九、特殊规定 十、审批受理时间要点补充 1. 审批机关决定是否受理的时间 2. 审批机关作出批准与否的决定时间 3. 颁发测绘资…
阅读更多...
linux /proc进程文件目录介绍

linux /proc进程文件目录介绍

参考&#xff1a;https://zhuanlan.zhihu.com/p/619966043 有时候想只查出来进程号&#xff0c;可以通过/proc/下查出该进程的运行及执行脚本情况信息 /proc/pid子目录 记录了进程的相关信息cmdline文件&#xff1a;包含了进程启动时使用的完整命令行参数。 cwd符号链接&#x…
阅读更多...
29. 【Android教程】折叠列表 ExpandableListView

29. 【Android教程】折叠列表 ExpandableListView

本节学习一个可折叠的 ListView&#xff0c;可以用在一些需要分类的场景下。通过 ExpandableListView 我们可以首先在 ListView 上展示大的分类&#xff0c;当点击某个类别的时候再将 ListView 做一个展开&#xff0c;展示该类下的所有子类供用户选择。它与 ListView 的不同主要…
阅读更多...
考研数学｜武忠祥VS张宇，谁讲得更全面❓

考研数学｜武忠祥VS张宇，谁讲得更全面❓

张宇和武忠祥都是很好的老师&#xff0c;你肯定也是这么觉得的&#xff0c;你自己也说了&#xff0c;跟着张宇看了几章&#xff0c;感觉不错&#xff0c;那就继续跟着啊&#xff0c;为什么听到同学说武忠祥好&#xff0c;你就动摇了呢。我们对于任何事情都要有自己的思考和规划…
阅读更多...
SQL注入简单总结

SQL注入简单总结

一、SQL注入是什么 SQL注入即&#xff1a;是指web应用程序对用户输入数据的合法性没有判断或过滤不严&#xff0c;攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句&#xff0c;在管理员不知情的情况下实现非法操作&#xff0c;以此来实现欺骗数据库服…
阅读更多...
prompt问题【中间不好】

prompt问题【中间不好】

问题1:longchain 关键词在中间容易被忽略掉 Found in the Middle: How Language Models Use Long Contexts Better via Plug-and-Play Positional Encoding 论文对大模型在长文本情况下的性能做了一系列实验研究&#xff0c;发现了一个有趣的“Lost in the middle”现象&#x…
阅读更多...
我与C++的爱恋：隐式类型转换

我与C++的爱恋：隐式类型转换

​ ​ &#x1f525;个人主页&#xff1a;guoguoqiang. &#x1f525;专栏&#xff1a;我与C的爱恋 朋友们大家好&#xff0c;本篇内容我们来介绍初始化列表&#xff0c;隐式类型转换以及explicit的内容 一、初始化列表 1.1 构造函数体赋值 在创建对象时&#xff0c;编译器…
阅读更多...
【笔试强训】Day3 --- 简写单词 + dd爱框框 + 除2！

【笔试强训】Day3 --- 简写单词 + dd爱框框 + 除2！

文章目录 1. 简写单词2. dd爱框框3. 除2&#xff01; 1. 简写单词 【链接】&#xff1a;简写单词 解题思路&#xff1a;简单模拟题&#xff0c;主要是处理⼀下输⼊的问题。&#xff08;也可以利用string类中的find函数&#xff0c;但时间复杂度会偏高&#xff09; #include …
阅读更多...
一套全院级PACS系统源码，实现影像检查的电子预约申请、电子诊断报告、 临床科室设立影像浏览终端等功能

一套全院级PACS系统源码，实现影像检查的电子预约申请、电子诊断报告、 临床科室设立影像浏览终端等功能

一套全院级PACS系统源码&#xff0c;实现影像检查的电子预约申请、电子诊断报告、 临床科室设立影像浏览终端等功能 一套全院级PACS系统源码&#xff0c;包括放射、CT、超声、内镜、病理等科室影像及信息管理系统的建设&#xff0c;解决医学影像的采集、诊断、传输、存储&#…
阅读更多...
电感与磁珠

电感与磁珠

电感是什么&#xff1f; 电感会通过产生感应电动势的方式来阻碍电流的变化&#xff0c;电流变化率越大&#xff0c;产生的感应电动势越大阻碍电流效果越明显。 [一]品质因数Q: 电感的品质因数Q值定义&#xff1a;电感的Q值也叫作品质因数&#xff0c;其为无功功率除以有功功率…
阅读更多...
永恒之蓝复现

永恒之蓝复现

目录 一、原理 二、实验环境 三、实验步骤 \1. 查询ip \2. 测试两台主机的连通性 \3. 查询指kali数据库的状态 \4. 此时就可以进行永恒之蓝漏洞扫描&#xff0c;&#xff08;永恒之蓝利用的是ms17_010漏洞&#xff0c;因此到这一步之后的任务就是在kali 里寻找ms17_010漏…
阅读更多...
比特币减半倒计时：NFT 生态将受到怎样的影响?

比特币减半倒计时：NFT 生态将受到怎样的影响?

BTC 减半倒计时仅剩不到 1 天&#xff0c;预计在 4 月 20 日迎来减半。当前区块奖励为 6.25 BTC&#xff0c;减半后区块奖励为 3.125 BTC&#xff0c;剩余区块为 253。比特币减半无疑是比特币发展史上最重要的事件之一&#xff0c;每当这一事件临近&#xff0c;整个加密社区都充…
阅读更多...
从零开始搭建网站（第二天）

从零开始搭建网站（第二天）

今天把之前的htmlcssjs项目迁移过来&#xff0c;直接使用tspiniavue3vite组合&#xff0c;搭建过程可以看从零开始搭建性能完备的网站-思路过程&#xff08;1&#xff09;_自己架设一个芯参数网站-CSDN博客。之后安装一下volar扩展。迁移过来使用Vue重构时发现之前使用的左右两…
阅读更多...
《深入浅出多模态》: 多模态经典模型：BLIP

《深入浅出多模态》: 多模态经典模型：BLIP

🎉AI学习星球推荐： GoAI的学习社区 知识星球是一个致力于提供《机器学习 | 深度学习 | CV | NLP | 大模型 | 多模态 | AIGC 》各个最新AI方向综述、论文等成体系的学习资料，配有全面而有深度的专栏内容，包括不限于 前沿论文解读、资料共享、行业最新动态以、实践教程、求职…
阅读更多...
计算机网络——GBN协议实现

计算机网络——GBN协议实现

实验目的 编程模拟实现GBN可靠传输软件 实验内容 C 程序模拟实现Go-Back-N可靠数据传输&#xff0c;需要编写一个发送端程序和一个测试端程序来模拟传输过程 具体流程 1. 编写发送端程序&#xff0c;调用库实现socket连接&#xff0c;然后主要实现滑动窗口&#xff0c;接收…
阅读更多...
IDEA开启自动导包，自动删包

IDEA开启自动导包，自动删包

找到file----------->Settings选项 找到Editor-------->General------------>Auto Import选项 勾选两个选项&#xff0c;在点击Apply,在点击ok 最后就ok了
阅读更多...
详解数据结构：栈

详解数据结构：栈

一、顺序栈 顺序栈的存储方式如下&#xff1a; 从图中可以看出&#xff0c;顺序栈需要两个指针&#xff0c;base指向栈底&#xff0c;top指向栈顶。 typedef struct SqStack {ElemType *base; //栈底指针ElemType *top; //栈顶指针}SqStack; 说明&#xff1a; ElemType是元…
阅读更多...
8款不同的404页面(网站404页面必备)

8款不同的404页面(网站404页面必备)

第1款 部分代码 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <title>404</title><link rel"stylesheet" href"css/style.css"></head> <body><div cla…
阅读更多...
C语言转型之路：从C到C++的类与对象初探

C语言转型之路：从C到C++的类与对象初探

欢迎来CILMY23的博客 本篇主题为 C语言转型之路&#xff1a;从C到C的类与对象初探 个人主页&#xff1a;CILMY23-CSDN博客 个人专栏系列&#xff1a; Python | C语言 | 数据结构与算法 | C 感谢观看&#xff0c;支持的可以给个一键三连&#xff0c;点赞关注收藏。 写在前头…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站