鸿蒙 arkTs 实现底部导航栏 中间凸出的样式 使用5.0 NEXT 版本 [ 新手教程 ] 代码直接CV然后运行即可

一, 先看效果

二, 新建一个ts文件 

三, ts代码

export const pagePadding:number = 15;
export const miniPadding:number = 5;
export const smallPadding:number = 10;
export const smallIconSize:number = 20;
export const middlIconSize:number = 30;
export const bigIconSize:number = 40;
export const normalFontSize:number = 15;
export const bigFontSize:number = 25;
export const smallBorderRaduis:number = 10;
export const blockBorderRaduis:number = 15;
export const smallAvaterSize:number = 30;
export const middleAvaterSize:number = 40;
export const roundedSquareSize:number = 60;
export const bigAvaterSize:number = 80;
export const swiperHeight:number = 180;
export const lineHeight:number = 20;
export const lineWidth:number = 5;
export const movieWidth:number = 150;
export const movieHeight:number = 200;
export const webviewHeight:number = 300;
export const dialogBtnHeight:number = 60;
export const btnWidth:number = 100;
export const inputHeight:number = 40;
export const opacity:number = 0.5;
export const popupMenuWidth:number = 200;
export const popupMenuHeight:number = 40;
export const barHeight:number = 70;

四, arkui 样式

import  * as size from '../components/size'
@Entry
@Component
struct Index {
  @State
  activeIndex: number = 0;

  @State
  isInitPage: Array<boolean> = [true, false, false, false];

  @Builder tabBuilder(index: number, title: string, selectedImage: Resource, normalImage: Resource) {
    Column() {
      Image(this.activeIndex == index ? selectedImage : normalImage)
        .width(size.middlIconSize)
        .height(size.middlIconSize)
        .margin({ top: size.smallPadding, bottom: size.smallPadding })
      Text(title)
        .fontColor(this.activeIndex == index ? '#9dc912' : '#ccc')
        .fontSize(size.normalFontSize)
        .padding({ bottom: size.pagePadding })
    }
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }


  @Builder center() {
    Row()
  }

  build() {
   Column(){
     Stack() {
       Tabs({
         index: this.activeIndex,
         barPosition: BarPosition.End
       }) {
         TabContent() {
           Text('首页')
         }
         .tabBar(this.tabBuilder(0, '首页', $r('app.media.wode1'), $r('app.media.wode')))
         .backgroundColor('#ccc')

         TabContent() {
             Text('推荐')
         }
         .tabBar(this.tabBuilder(1, '推荐', $r('app.media.fuwu1'), $r('app.media.fuwu')))
         .backgroundColor('#ccc')

         TabContent() {}
         .tabBar(this.center())
         .backgroundColor('#ccc')

         TabContent() {
             Text('消息')
         }
         .tabBar(this.tabBuilder(3, '消息', $r('app.media.fuwu1'), $r('app.media.fuwu')))
         .backgroundColor('#ccc')

         TabContent() {
           Text('我的')
         }
         .tabBar(this.tabBuilder(4, '我的', $r('app.media.XIAOXI1'), $r('app.media.xiaoxi')))
         .backgroundColor('#ccc')

       }
       .barHeight(size.barHeight)
       .barMode(BarMode.Fixed)
       .onChange((index) => {
         this.isInitPage[index] = true;
         this.activeIndex = index
         console.log(this.activeIndex.toString())
       })

       // 底部导航栏中间凸起
       Image($r('app.media.ic_tabbar_icon_3_selected'))
         .margin({bottom:size.barHeight - size.bigAvaterSize/2 - size.miniPadding})
         .height(size.bigAvaterSize + size.miniPadding * 2)
         .height(size.bigAvaterSize + size.miniPadding * 2)
           // 设置悬浮图标居中对齐
         .alignSelf(ItemAlign.Center)
         .borderRadius(size.bigAvaterSize + size.miniPadding * 2)
         .backgroundColor(Color.White)
         .border({
           width: size.miniPadding,
           color: Color.Gray,
           style: BorderStyle.Solid
         })
     }
     .width('100%')
     .height('100%')
     .alignContent(Alignment.Bottom)
   }
  }


}