This content originally appeared on DEV Community and was authored by wei chang
今天要分享的是开发一个自定义tabbar，先看效果图：
自己做的图标不太美观，大家见谅哈哈哈。
这种带中间凸起的tabbar在项目中非常常见，但是我研究了一下系统的tabbar是不支持这样设置的，所以我们就自己开发一个。
首先给每个tabbar的item定义一个class：
export class YLTabClass{
//选中图标
selectImage:Resource
//默认图标
defaultImage:Resource
//中间是否凸起
middleMode:boolean
//标题
title:string
//是否选中
isSelected:boolean = false
constructor(selectImage:Resource,defaultImage:Resource,title:string,middleMode = false) {
this.selectImage = selectImage
this.defaultImage = defaultImage
this.title = title
this.middleMode = middleMode
}
}
然后创建一个tabbar Item：
import {YLTabClass} from './YLTabCLass'
@Component
export struct YLTabbarItem{
tabItem:YLTabClass
@Prop isSelected:boolean
build(){
Column(){
//根据isSelected字段设置图标，如果isSelected为true设置选中图标，否则为默认图标
Image(this.isSelected ? this.tabItem.selectImage : this.tabItem.defaultImage)
//如果是中间凸起按钮图片尺寸为45，否则是42
.size({width:this.tabItem.middleMode ? 45 : 22,height:this.tabItem.middleMode ? 45 : 22})
//为中间按钮外的其他按钮设置标题
if(!this.tabItem.middleMode){
Text(this.tabItem.title)
.fontSize(12)
.margin({top:6})
.fontColor(this.isSelected ? '#3C8DFF' : '#B7B7B7')
}
}
.width("100%")
.height(56)
.justifyContent(FlexAlign.Center)
}
}
接下来，为tabbar创建5个按钮，记得把中间按钮的位置做调整：
import {YLTabClass} from './YLTabCLass'
import {YLTabbarItem} from './YLTabbarItem'
@Component
export struct YLTabbar {
tabItemClick:(index)=>void
@State currentIndex:number = 0
tab:YLTabClass[] = [
new YLTabClass($r('app.media.tb01'),$r('app.media.tb00'),'首页'),
new YLTabClass($r('app.media.tb11'),$r('app.media.tb10'),'行程'),
new YLTabClass($r('app.media.tab_add'),$r('app.media.tab_add'),'',true),
new YLTabClass($r('app.media.tb21'),$r('app.media.tb20'),'发现'),
new YLTabClass($r('app.media.tb31'),$r('app.media.tb30'),'我的'),
]
build() {
Flex(){
ForEach(this.tab,(item,index:number)=>{
YLTabbarItem({tabItem:item,isSelected:this.currentIndex === index})
.offset({x:item.x,y:item.middleMode ? -25:0})
.onClick(()=>{
if(index != 2){
this.currentIndex = index
}
console.log(index+ "" + this.currentIndex);
this.tabItemClick(index);
})
})
}
}
}
这样一个自定义的tabbar就完成啦，不过我们还有一些工作要做。就是如何用它控制页面的切换，幽蓝君的思路是在页面上再放一个Tabs，将tabbar高度设为0，大致代码如下，供大家参考：
Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {
TabContent() {
home()
}
TabContent() {
goals()
}
TabContent() {
reccuring()
}
TabContent() {
more()
}
}
.vertical(false)
.backgroundColor('#F1F3F5')
.barHeight(0)
TLTabbar()
今天的分享就是这样
This content originally appeared on DEV Community and was authored by wei chang
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
wei chang | Sciencx (2025-03-23T02:36:13+00:00) 鸿蒙Next开发自定义tabbar，带中间凸起按钮. Retrieved from https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/
" » 鸿蒙Next开发自定义tabbar，带中间凸起按钮." wei chang | Sciencx - Sunday March 23, 2025, https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/
HARVARDwei chang | Sciencx Sunday March 23, 2025 » 鸿蒙Next开发自定义tabbar，带中间凸起按钮., viewed ,<https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/>
VANCOUVERwei chang | Sciencx - » 鸿蒙Next开发自定义tabbar，带中间凸起按钮. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/
CHICAGO" » 鸿蒙Next开发自定义tabbar，带中间凸起按钮." wei chang | Sciencx - Accessed . https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/
IEEE" » 鸿蒙Next开发自定义tabbar，带中间凸起按钮." wei chang | Sciencx [Online]. Available: https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/. [Accessed: ]
rf:citation » 鸿蒙Next开发自定义tabbar，带中间凸起按钮 | wei chang | Sciencx | https://www.scien.cx/2025/03/23/%e9%b8%bf%e8%92%99next%e5%bc%80%e5%8f%91%e8%87%aa%e5%ae%9a%e4%b9%89tabbar%ef%bc%8c%e5%b8%a6%e4%b8%ad%e9%97%b4%e5%87%b8%e8%b5%b7%e6%8c%89%e9%92%ae/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.