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

可参考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

    })

  }

}

expandSafeArea也需要存储每个tab的状态，和setWindowLayoutFullScreen前提一致，参考下面这个demo：

import { window } from '@kit.ArkUI'

@Entry

@Component

export struct ExpandSafeArea{

  @State currentIndex: number = 0

  @State isFullScreen: boolean = false

  @State curWindow: window.Window | undefined = undefined

  @State TabArr: string[] = ['首页', '推荐', '发现', '我的']

  @State statusArr: boolean[] = []

  @State marginTop: number = 0

  aboutToAppear(): void {

    //这里更新statusArr数据，实际上在加载h5的时候获取

    this.statusArr = [true, true, false, false]

  }

  @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.marginTop = this.statusArr[index] === true ? 0 : 5 // 这里根据实际替换成顶部避让高度

          })

          .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP])

          .margin({

            top: this.marginTop

          })

        })

      }

      .vertical(false)

      .clip(false) //tabs包含的时候需要注意， clip默认是开启的。需要关闭不然子节点不能扩展安全区域。

      .width('100%')

      .height('100%')

      .onChange((index: number) => {

        this.currentIndex = index

        // this.handleFullScreen(index)

      })

    }

  }

}