鸿蒙开发自定义tabbar，带中间凸起按钮_鸿蒙arkts实现底部导航中间凸起Text(this.tabItem.tit

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()

‘鸿蒙tab’获取本文源码，请移步至文章尾部

最后，有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（Harmony NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（Harmony NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（**ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony****多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）**技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料****