HarmonyOs开发:导航tabs组件封装与使用
ztj100 2025-01-02 20:33 16 浏览 0 评论
前言
主页的底部导航以及页面顶部的切换导航,无论哪个系统,哪个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.4"}
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、底部导航案例3,中间图片
代码案例
/**
* AUTHOR:AbnerMing
* DATE:2024/3/5
* INTRODUCE:底部导航案例中间图片
* */
@Entry
@Component
struct BottomTabPage4 {
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) {
if (index == 2) {
Column() {
Image($r("app.media.add"))
.width(50).height(50)
.margin({ top: -10 })
}
} else {
Column() {
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%")
.justifyContent(FlexAlign.Center)
}
}
build() {
Column() {
ActionBar({ title: "自定义底部导航(中间图片)" })
BaseBottomTabLayout({
itemPage: this.itemPage,
itemTab: this.itemTab,
barBackgroundColor: "#e8e8e8",
centerImageMarginBottom: 10,
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("中间图片"),
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)
},
onDoubleClick: (position) => {
//双击
console.log("===========双击:" + position)
},
})
}
}
}
4、普通指示器导航【滑动】
简单案例
TabLayout({
tabBar: ["条目一", "条目二"],
itemPage: this.itemPage,
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
设置圆角
TabLayout({
tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
itemPage: this.itemPage,
tabAttribute: (tab) => {
tab.tabDividerStrokeWidth = 10
tab.tabDividerLineCapStyle = LineCapStyle.Round
},
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
设置宽度
TabLayout({
tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
itemPage: this.itemPage,
tabAttribute: (tab) => {
tab.tabDividerWidth = 20
},
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
跟随文字宽度
TabLayout({
tabBar: ["一", "第二", "条目三", "是条目四", "我是条目五", "最后是条目六"],
itemPage: this.itemPage,
tabAttribute: (tab) => {
tab.tabItemWidth = undefined
tab.tabItemMargin = { left: 10, right: 10 }
//更改下划线的宽度
tab.tabDividerWidth = undefined
},
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
左侧按钮
TabLayout({
tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
itemPage: this.itemPage,
tabMenu: this.itemMenu, //按钮
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
自定义下划线
BaseTabLayout({
tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
itemPage: this.itemPage,
tabModel: {
tabDividerStrokeWidth: 15
},
itemTabIndicator: () => {
this.tabItemTabIndicator(this) //自己定义指示器
},
itemTab: (index: number, item: string) => {
this.tabItem(this, index, item)
},
})
相关属性
属性 | 类型 | 概述 |
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按钮距离右侧的距离 |
5、普通指示器导航【不可滑动】
简单案例
TabLayout({
tabBar: ["条目一", "条目二", "条目三", "条目四", "条目五", "条目六"],
itemPage: this.itemPage,
tabType: TabType.DEFAULT, //普通的需要设置默认值,指示器不会跟着手势滑动
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (position) => {
//点击改变
console.log("===点击改变:" + position)
}
})
均分
TabLayout({
tabBar: ["条目一", "条目二"],
barMode: BarMode.Fixed, //均分
tabType: TabType.DEFAULT, //普通的需要设置默认值,指示器不会跟着手势滑动
itemPage: this.itemPage,
onChangePage: (position) => {
//页面改变
console.log("===页面改变:" + position)
},
onTabBarClick: (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,那么在导航条目较多的情况下,这个模式是很不符合需求的,当然了,我也在一步一步优化中,也希望在较短的时间内可以实现,大家可以持续关注。
相关推荐
- 前端案例·程序员的浪漫:流星雨背景
-
如果文章对你有收获,还请不要吝啬【点赞收藏评论】三连哦,你的鼓励将是我成长助力之一!谢谢!(1)方式1:简单版本【1】先看实现效果...
- UI样式iPod classic的HTML本地音乐播放器框架
-
PS:音量可以鼠标点击按住在音量图标边的轮盘上下拖拽滑动音量大小中心按钮可以更改播放器为白色...
- JavaScript 强制回流问题及优化方案
-
JavaScript代码在运行过程中可能会强制触发浏览器的回流(Reflow)...
- Ai 编辑器 Cursor 零基础教程:推箱子小游戏实战演练
-
最近Ai火的同时,Ai编辑器Cursor同样火了一把。今天我们就白漂一下Cursor,使用免费版本搞一个零基础教程...
- 19年前司机被沉尸水库!凶手落网,竟已是身家千万的大老板
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 全民健身网络热度调查“居家健身”成为第一网络热词
-
]|\[sS])*"|'(?:[^\']|\[sS])*'|[^)}]+)s*)/g,l=window.testenv_reshost||window.__moon_host||"res.wx.qq...
- 取代JavaScript库的10个现代Web API及详细实施代码
-
为什么浏览器内置的API你还在用某个臃肿的Javascript库呢?用内置的API有什么好处呢?Web平台经历了巨大演进,引入了强大的原生API,不再需要臃肿的JavaScript库。现代浏览器现已支...
- 前端文件下载的N种姿势:从简单到高级
-
文件下载是web开发里一个非常常见的功能,无论是下载用户生成的数据、图片、文档还是应用程序包。前端开发者有多种方式来实现这一需求,每种方式都有其适用场景和优缺点。介绍下几种比较常用的文件下载方法。...
- JavaScript 性能优化方法(js前端性能优化)
-
JavaScript性能优化方法减少DOM操作频繁的DOM操作会导致浏览器重绘和回流,影响性能。使用文档片段(DocumentFragment)或虚拟DOM技术减少直接操作。...
- DOM节点的创建、插入、删除、查找、替换
-
在前端开发中,js与html联系最紧密的莫过于对DOM的操作了,本文为大家分享一些DOM节点的基本操作。一、创建DOM节点使用的命令是varoDiv=document.createElement...
- 前端里的拖拖拽拽(拖拽式前端框架)
-
最近在项目中使用了react-dnd,一个基于HTML5的拖拽库,“拖拽能力”丰富了前端的交互方式,基于拖拽能力,会扩展各种各样的拖拽反馈效果,因此有必要学习了解,最好的学习方式就是实操!...
- 大模型实战:Flask+H5三件套实现大模型基础聊天界面
-
本文使用Flask和H5三件套(HTML+JS+CSS)实现大模型聊天应用的基本方式话不多说,先贴上实现效果:流式输出:思考输出:聊天界面模型设置:模型设置会话切换:前言大模型的聊天应用从功能...
- SSE前端(sse前端数据)
-
<!DOCTYPEhtml><htmllang="zh-CN"><head>...
- 课堂点名总尴尬?试试 DeepSeek,或能实现点名自由!(附教程)
-
2025年2月26日"你有没有经历过这样的场景?老师拿着花名册扫视全班:'今天我们来点名...'那一刻心跳加速,默念:'别点我!'但现在,我要...
- 我会在每个项目中复制这10个JS代码片段
-
你是否也有这种感觉:在搭建新项目时,你会想:"这个函数我是不是已经写过了...在某个地方?"是的——我也是。所以在开发了数十个React、Node和全栈应用后,我不再重复造轮子。我创建...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)
- vmware17pro最新密钥 (34)
- mysql单表最大数据量 (35)