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

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

window.getLastWindow(getContext()).then((win) => {
  win.setWindowLayoutFullScreen(true)
})
HarmonyOS
2024-12-20 15:39:41
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Excelsior_abit

可参考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
    })
  }
}
分享
微博
QQ
微信
回复
2024-12-20 19:05:18
相关问题
如何设置沉浸状态栏
3193浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏
388浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏无效
249浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏实现
414浏览 • 1回复 待解决
如何实现沉浸状态栏
1160浏览 • 1回复 待解决
HarmonyOS 沉浸状态栏最佳实践
528浏览 • 1回复 待解决
沉侵状态栏获取状态栏高度为0
703浏览 • 1回复 待解决
状态栏底部触控高度获取
1337浏览 • 2回复 待解决
全面屏手机的沉浸状态栏自适应
1314浏览 • 1回复 待解决
HarmonyOS 获取状态栏高度
386浏览 • 1回复 待解决