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

news2024/11/19 22:48:53

前言

主页的底部导航以及页面顶部的切换导航，无论哪个系统，哪个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.coloradmin.cn/o/1609976.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

C++相关概念和易错语法（6）（运算符重载）

C++相关概念和易错语法（6）（运算符重载）

1.运算符重载注意事项&#xff1a; &#xff08;1&#xff09;多个同一运算符重载可构成函数重载 &#xff08;2&#xff09;在成员函数中由于隐含了this指针&#xff0c;外部调用看上去前置和后置不会有任何区别&#xff0c;所以为了区分这个在后置时强制引入参数int&#x…
阅读更多...
C++：模板详解

C++：模板详解

模板详解 1.函数模板1.概念2.语法3.原理4.实例化1.隐式实例化2.显示实例化 5.匹配原则 2.类模板1.格式2.实例化 3.非类型模板参数注意点 4.特化1.概念2.函数模板特化1.前提2.语法说明3.示例 3.类模板特化1.全特化2.偏特化/半特化3.选择顺序 4.按需实例化 5.模板的分离编译1.分离…
阅读更多...
玄子Share-计算机网络参考模型

玄子Share-计算机网络参考模型

玄子Share-计算机网络参考模型 分层思想 利用七层参考模型&#xff0c;便于在网络通信过程中&#xff0c;快速的分析问题&#xff0c;定位问题并解决问题 将复杂的流程分解为几个功能相对单一的子过程 整个流程更加清晰&#xff0c;复杂问题简单化 更容易发现问题并针对性的…
阅读更多...
Labview2024安装包（亲测可用）

Labview2024安装包（亲测可用）

目录 一、软件简介 二、软件下载 一、软件简介 LabVIEW是一种由美国国家仪器&#xff08;NI&#xff09;公司开发的程序开发环境&#xff0c;它显著区别于其他计算机语言&#xff0c;如C和BASIC。传统的计算机语言是基于文本的语言来产生代码&#xff0c;而LabVIEW则采用图形化…
阅读更多...
【Python】函数基础（纯干货版）

【Python】函数基础（纯干货版）

目录 什么是函数 函数定义 函数的文档说明 局部变量和全局变量 综合案例&#xff1a;模拟实现ATM界面 什么是函数 函数是组织好的&#xff0c;可重复使用的&#xff0c;用于实现特定功能的代码段&#xff0c;将功能封装在函数内&#xff0c;可供随时随地重复利用&#xff…
阅读更多...
代理IP对网络爬虫有什么影响？

代理IP对网络爬虫有什么影响？

代理IP对网络爬虫的影响深远且多方面&#xff0c;主要体现在以下几个方面&#xff1a; 第一点&#xff0c;代理IP能有效防止爬虫IP被封禁&#xff1a;在爬虫工作过程中&#xff0c;如果频繁访问同一目标网站&#xff0c;很容易被该网站的服务器识别为恶意行为&#xff0c;导致…
阅读更多...
Pytest精通指南（22）钩子函数-重复执行（pytest-repeat）

Pytest精通指南（22）钩子函数-重复执行（pytest-repeat）

文章目录 前言应用场景插件安装参数分析使用方式一&#xff1a;命令行使用方式二&#xff1a;配置文件使用方式三&#xff1a;装饰器 前言 pytest框架中的**重复测试&#xff08;pytest-repeat&#xff09;**插件的用途是允许在运行测试用例时进行多次循环&#xff0c;以更全面…
阅读更多...
阿里二面凉了，难蹦。。。

阿里二面凉了，难蹦。。。

分享一位同学阿里巴巴的后端面经&#xff0c;共有 2 面&#xff0c;第一面很顺利过了&#xff0c;可惜挂在第二面。 这两面的知识点范围&#xff0c;我帮大家罗列一下&#xff1a; 网络&#xff1a;TCP、HTTP mysql&#xff1a;索引应用、索引结构、隔离级别、最左匹配 redis…
阅读更多...
流程控制：goto语句，模拟switch语句

流程控制：goto语句，模拟switch语句

示例&#xff1a; /*** brief how about goto-switch? show you here.* author wenxuanpei* email 15873152445163.com(query for any question here)*/ #define _CRT_SECURE_NO_WARNINGS//support c-library in Microsoft-Visual-Studio #include <stdio.h>static …
阅读更多...
循环购模式：创新消费返利，引领电商新潮流

循环购模式：创新消费返利，引领电商新潮流

大家好&#xff0c;我是吴军&#xff0c;今天我将与大家探讨一种别具一格的商业模式——循环购模式。或许您曾经听说过消费满额赠送现金的活动&#xff0c;甚至每天都能累积并提取部分现金。您可能会好奇&#xff0c;商家为何如此慷慨地“回馈”消费者&#xff1f;这背后其实蕴…
阅读更多...
QT C++ sqlite 对多个数据库的操作

QT C++ sqlite 对多个数据库的操作

//本文描述&#xff0c;QT 对多数据库的操作。 //你可能会想&#xff0c;多数据库的操作时&#xff0c;查询语句怎么知道是哪个数据库。 //QT提供了这样一种构造函数 QSqlQuery(const QSqlDatabase &db) //指定数据库 //在QT6.2.4 MSVC2019调试通过。 //效果见下图&am…
阅读更多...
刷题 替换数字

刷题 替换数字

题干 给定一个字符串 s&#xff0c;它包含小写字母和数字字符&#xff0c;请编写一个函数&#xff0c;将字符串中的字母字符保持不变&#xff0c;而将每个数字字符替换为number。 例如&#xff0c;对于输入字符串 "a1b2c3"&#xff0c;函数应该将其转换为 "an…
阅读更多...
关于超出表示范围的数据类型转化

关于超出表示范围的数据类型转化

目录 背景&#xff1a; 问题分析&#xff1a; 参数异常分析&#xff1a; 分析文件原始值&#xff1a; 分析数据类型转换 代码分析&#xff1a; 结论&#xff1a; 参考资料&#xff1a; 背景&#xff1a; 在Ubuntu环境下进行项目开发时&#xff0c;调试时程序总是进入断…
阅读更多...
小型企业网络优化加速方案

小型企业网络优化加速方案

随着数字化经济蓬勃发展&#xff0c;小型企业的网络基础设施变得尤为重要。在这一浪潮中&#xff0c;建立一个稳定、高效的企业网络成为支撑业务发展的关键。本文将深入研究针对小型企业设计的网络优化加速方案&#xff0c;助力企业主了解如何规划和实施适合自身业务需求的网络…
阅读更多...
车载诊断系统应用方案选型，ESP8266方案让成本降低了35%，销售数据提升47%

车载诊断系统应用方案选型，ESP8266方案让成本降低了35%，销售数据提升47%

车载诊断系统简称OBD&#xff0c;这个系统随时监控发动机的运行状况和尾气后处理系统的工作状态&#xff0c;一旦发现有可能引起排放超标的情况&#xff0c;会马上发出警示。当系统出现故障时&#xff0c;故障灯(MIL)或检查发动机(Check Engine)警告灯亮&#xff0c;同时OBD系统…
阅读更多...
使用Python进行容器编排Docker Compose与Kubernetes的比较

使用Python进行容器编排Docker Compose与Kubernetes的比较

&#x1f47d;发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。【点击进入巨牛的人工智能学习网站】。 随着容器化技术的普及&#xff0c;容器编排成为了管理和部署容器化应用程序的重要环节。在容…
阅读更多...
尺取法知识点讲解

尺取法知识点讲解

一、固定长度的情况&#xff1a; 最小和(sum) 输入N个数的数列&#xff0c;所有相邻的M个数的和共有N-M1个&#xff0c;求其中的最小值。 输入格式 第1行&#xff0c;2个整数N&#xff0c;M&#xff0c;范围在[3…100000]&#xff0c;N>M。 第2行&#xff0c;有N个正…
阅读更多...
Sqli-labs靶场第25关[Sqli-labs-less-25]自动化注入-SQLmap工具注入

Sqli-labs靶场第25关[Sqli-labs-less-25]自动化注入-SQLmap工具注入

过滤了AND OR 使用的函数是 preg_replace 特点&#xff1a;只对值进行一次检测闭合方式为 单引号 可以使用双写进行绕过 手工注入 ?id0 union select 1,database(),user() -- sqlmap自动化注入 sqlmap.py -u http://192.168.58.114:802/sqli-labs/Less-25/?id2 --batch -…
阅读更多...
交换机的种类有哪些？主要都具有哪些作用？

交换机的种类有哪些？主要都具有哪些作用？

在当今数字化时代&#xff0c;网络已经成为我们生活和工作中不可或缺的一部分。无论是家庭网络还是企业网络&#xff0c;都需要有效的网络设备来实现数据通信和资源共享。而网络交换机作为一种重要的网络设备&#xff0c;扮演着连接和管理网络设备的关键角色。本文将探讨交换机…
阅读更多...
etcd campaign

etcd campaign

1. 引言 本文主要讲解使用etcd进行选举的流程&#xff0c;以及对应的缺陷和使用场景 2. etcd选举流程 流程如以代码所示&#xff0c;流程为&#xff1a; clientv3.New 创建client与etcd server建立连接 concurrency.NewSession 创建选举的session&#xff0c;一般会配置ses…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023