鸿蒙(HarmonyOS)—自定义TabBar适配底部安全区域+中间凸起

import { home } from './Home/home'; //我的
import { waterFlowDemo } from './propaganda'; //宣教
import {map} from "./map"
import {my} from "./MY"
import {send} from "./send"
import { statusClass } from '../../store';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @State currentIndex: number = 0   //tabBar按钮点击下标
  @State BottomAvoidAreaHeight :number = 0  //获取到的系统底部安全距离
   getBottomHeightSetTimeout:number = -1  //定时器定义 用于清除
  // 控制器
  private  TabsController:TabsController =new TabsController()
   aboutToAppear(): void {
     // 获取底部安全区域 添加了定时器防止获取不到
     this.getBottomHeightSetTimeout = setTimeout(()=>{
        this.BottomAvoidAreaHeight =  JSON.parse(statusClass.getSystemStatus('BottomAvoidAreaHeight') as string)
       console.log(this.BottomAvoidAreaHeight+'底部高度'+this.getBottomHeightSetTimeout);
       if(this.BottomAvoidAreaHeight){
         clearTimeout(this.getBottomHeightSetTimeout)
       }
      },1000)
  }
  // tabBar的item
  @Builder
  tabBuilder(img:ResourceStr,selectImg:ResourceStr, text:string,index:number ){
    Column(){
      // 屏蔽中间的按钮 定位一个上去
      if(index!=2){
        Image(this.currentIndex===index?selectImg:img)
          .width(20)
          .aspectRatio(1)
        Text(text)
          .fontColor(this.currentIndex===index?Color.Green:Color.Gray)
      }
    }
  }
  build() {
    Stack({alignContent:Alignment.Bottom}){
      // tabBar设置在底部
      Tabs({barPosition:BarPosition.End, index: this.currentIndex,controller:this.TabsController}){
          TabContent(){
                home()
            .height(`calc(100% - 22vp )`) //限制组件高度 22为tabs的一半
          }.tabBar(this.tabBuilder($r('app.media.ic_public_message'),$r('app.media.ic_public_message_filled'),  '消息',0))
          .align(Alignment.Top) //内容对齐方式 必加
        TabContent(){
              map()
          }.tabBar(this.tabBuilder($r('app.media.ic_public_contacts'), $r('app.media.ic_public_contacts_filled'),'地图',1))
          TabContent(){
            send()
          }.tabBar(this.tabBuilder($r('app.media.nav_ico_fab'), $r('app.media.nav_ico_fab'),'发送',2))
          TabContent(){
            waterFlowDemo()
          }.tabBar(this.tabBuilder($r('app.media.ic_public_contacts'), $r('app.media.ic_public_contacts_filled'),'宣教',3))
          TabContent(){
            my()
          }.tabBar(this.tabBuilder($r('app.media.ic_public_contacts'), $r('app.media.ic_public_contacts_filled'),'我的',4))
        }
      .onChange((index: number) => {
        this.currentIndex = index
      })
      .barHeight(44) //默认高度
      .scrollable(false) //禁止左右滑动
      .animationDuration(0)  //点击切换动画时间
      .backgroundImage($r("app.media.tab_nav_bg")) //底部tabBar的图片
      .backgroundImageSize({width:'100%'})
      .backgroundImagePosition(Alignment.Bottom) //在Tabs的位置
      .backgroundImageResizable({slice:{bottom:this.BottomAvoidAreaHeight}}) //伸展 没起到啥作用 放着有备无患
      .backgroundColor(Color.White)
      .margin({bottom:this.BottomAvoidAreaHeight}) //将底部安全区域空出来
      // 中间的按钮
      Image($r('app.media.nav_ico_fab'))
        .width(50)
        .aspectRatio(1)
        .offset({y:-4 })
        .margin({bottom:this.BottomAvoidAreaHeight}) //将底部安全区域空出来
  }
  .height("100%")
  }
}

鸿蒙自定义底部tabbar