HarmonyOS 鸿蒙Next底部小白条沉浸式适配问题

这是我的代码，我在EntryAbility已经加入

async function enterImmersion(windowClass: window.Window) {
  // 获取状态栏和导航栏的高度
  windowClass.on("avoidAreaChange", ({ type, area }) => {
    if (type == window.AvoidAreaType.TYPE_SYSTEM) {
      // 将状态栏和导航栏的高度保存在AppStorage中
      AppStorage.SetOrCreate<number>("topHeight", area.topRect.height);
      AppStorage.SetOrCreate<number>("bottomHeight", area.bottomRect.height);
    }
  })
  // 设置窗口布局为沉浸式布局
  await windowClass.setWindowLayoutFullScreen(true)
}

达到沉浸

import HomeComponent from './components/HomeComponent'
import MeComponent from './components/MeComponent'
import abilityAccessCtrl, { Permissions } from '@ohos.abilityAccessCtrl';
import common from '@ohos.app.ability.common';
import router from '@ohos.router';
import promptAction from '@ohos.promptAction';
import PermissionUtils from './utils/PermissionUtils';
import ScanComponent from './components/ScanComponent';

let statusHeight = AppStorage.Get('topHeight') as number
let navigateHeight = AppStorage.Get('bottomHeight') as number

const permissions: Array<Permissions> = ['ohos.permission.CAMERA', 'ohos.permission.READ_MEDIA'];

@Entry
@Component
struct Index {
  @State username: string = ''
  @State titles: Array<string> = ['主页', '我的']
  @State currentIndex: number = 0;
  @State permissonFlag: boolean = false
  private controller: TabsController = new TabsController()

  @Builder
  TabBuilder(title: string, targeIndex: number, selectImg: Resource, normalImg: Resource, length?: number) {
    Column() {
      Image(this.currentIndex == targeIndex ? selectImg : normalImg)
        .size({
          width: 25,
          height: 25
        })
        .margin({
          top: 5
        })
      Text(title)
        .fontColor(this.currentIndex == targeIndex ? '#28bff1' : '#8a8a8a')
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])
    }
    .backgroundColor('#f0f0f0')
    .width('100%')
    .height('100%')
    .onClick(() => {
      this.currentIndex = targeIndex
      this.controller.changeIndex(targeIndex)
    })
  }

  @Builder
  NavigationMenus() {
    Row() {
      NavRouter() {
        Column() {
          Image($r('app.media.ic_public_input_scan'))
            .width(24)
            .height(24)
          Text('扫一扫')
            .fontSize(10)
        }

        NavDestination() {
          ScanComponent()
        }
        .title('扫一扫')
        .backgroundColor(Color.White)
      }
    }
  }

  build() {
    Row() {
      Column() {
        Navigation() {
          Tabs({
            barPosition: BarPosition.End,
            controller: this.controller
          }) {
            TabContent() {
              HomeComponent()
            }
            .tabBar(this.TabBuilder('主页', 0, $r('app.media.home_press'), $r('app.media.home')))

            TabContent() {
              MeComponent()
            }
            .tabBar(this.TabBuilder('我的', 1, $r('app.media.me_press'), $r('app.media.me')))
          }
          .scrollable(false)
          .onChange((index) => {
            this.currentIndex = index
          })

        }
        .titleMode(NavigationTitleMode.Mini)
        .hideBackButton(true)
        .title(this.titles[this.currentIndex])
        .mode(NavigationMode.Auto)
        .navBarWidth(360)
        .menus(this.NavigationMenus())
        .width('100%')
        .height('100%')
      }
      .width('100%')
      .height('100%')
    }
    .width('100%')
    .height('100%')
    .padding({
      top: px2vp(statusHeight),
    })
  }
}

我在主页面底部导航栏自定义组件TabBuilder内底部文字加入了.expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.BOTTOM])，但是调试时底部白条并未沉浸效果如下各位大佬有知道的吗