HarmonyOS 沉浸式设置底部状态栏高度变化问题？

Question

在页面中设置全屏和js中设置全屏效果不一致

window.getLastWindow(getContext()).then((win) => {
  win.setWindowLayoutFullScreen(true)
})

Answer 1

可参考demo

import { window } from '@kit.ArkUI'

@Entry
@Component
export struct ExpandSafeArea2 {
  @State currentIndex: number = 0
  @State isFullScreen: boolean = false
  @State curWindow: window.Window | undefined = undefined
  @State TabArr: string[] = ['首页', '推荐', '发现', '我的']
  @State statusArr: boolean[] = []
  private bottomRectHeight: number = 0
  @State marginBottom: number = 0

  aboutToAppear(): void {
    //这里更新statusArr数据，实际上在加载h5的时候获取
    this.statusArr = [true, true, false, false]
    window.getLastWindow(getContext()).then((win) => {
      this.curWindow = win;
      // 根据status信息判断首个界面是否设置沉浸式
      this.curWindow.setWindowLayoutFullScreen(true)
      let type = window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR; // 以导航条避让为例
      let avoidArea = win.getWindowAvoidArea(type);
      console.log(JSON.stringify(avoidArea.bottomRect))
      this.bottomRectHeight = px2vp(avoidArea.bottomRect.height); // 获取到导航条区域的高度
      this.handleFullScreen(this.currentIndex)
    })
  }

  handleFullScreen(index: number) {
    if (!this.curWindow || !this.statusArr.length) {
      return;
    }
    // 对应tab的逻辑
    this.curWindow.setWindowLayoutFullScreen(this.statusArr[index])
    this.marginBottom = this.statusArr[index] === true ? this.bottomRectHeight : 0 // 沉浸式的时候添加底部margin
  }

  @Builder
  tabBuilder(title: string, targetIndex: number) {
    Column() {
      Text(title)
        .fontColor(this.currentIndex === targetIndex ? '#1698CE' : '#6B6B6B')
    }
    .width('100%')
    .height(50)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column() {
      Tabs({ barPosition: BarPosition.End }) {
        ForEach(this.TabArr, (tab: string, index: number) => {
          TabContent() {
            Text(tab + '沉浸状态：' + this.statusArr[index]).fontSize(30)
          }
          .backgroundColor(Color.Red)
          .tabBar(this.tabBuilder(tab, 0))
          .onWillShow(() => {
            this.handleFullScreen(index)
          })
        })
      }
      .vertical(false)
      .clip(false) //tabs包含的时候需要注意， clip默认是开启的。需要关闭不然子节点不能扩展安全区域。
      .width('100%')
      .height('100%')
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
    .margin({
      bottom: this.marginBottom
    })
  }
}