鸿蒙如何设置 沉浸式布局？

• 方法1：设置padding
• 方法2：设置expandSafeArea

1.设置padding

首先，封装utils/fullscreen.ets

● window.getLastWindow 获取当前窗口对象
● window.setWindowLayoutFullScreen 设置主窗口或子窗口的布局是否为沉浸式布局
● getWindowAvoidArea 使用窗口对象获取某一个区域的尺寸
import { window } from "@kit.ArkUI"

class FullScreen{
  async enable(){
    try {
      const context=AppStorage.get<Context>('context')
      if (context) {
        const win=await window.getLastWindow(context)
        await win.setWindowLayoutFullScreen(true)
        const topArea=await win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
        AppStorage.setOrCreate('topHeight',px2vp(topArea.topRect.height))
        //TYPE_SYSTEM表示系统默认区域，一般包括状态栏 导航栏，各设备系统定义可能不同。 topRect  屏幕顶部的矩形区。
        const bottomArea=await win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
        AppStorage.setOrCreate('bottomHeight',px2vp(bottomArea.bottomRect.height))
        //TYPE_NAVIGATION_INDICATOR 表示导航条区域   bottomRect  屏幕底部的矩形区。
      }

    } catch (e) {
      console.log('FullScreen enable', JSON.stringify(e))
    }
  }
  async  disable(){
    try {
      const context=AppStorage.get<Context>('context')
      if (context) {
        const win=await window.getLastWindow(context)
        await win.setWindowLayoutFullScreen(false)
        AppStorage.setOrCreate('topHeight', 0)
        AppStorage.setOrCreate('bottomHeight', 0)
      }
    } catch (e) {
      console.log('FullScreen enable', JSON.stringify(e))
    }
  }
}
export const fullScreen=new FullScreen()

其次，在entryAbility中

 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
    AppStorage.setOrCreate('context',this.context)//共享context上下文对象
  }

    fullScreen.enable()//开启沉浸式
    windowStage.loadContent('pages/Index', (err) => {

最后在Index页面中测试效果。

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  @StorageProp('topHeight') topHeight: number = 0
  @StorageProp('bottomHeight') bottomHeight: number = 0

  build() {
    Column() {
     Text('top')
      Blank()
     Text('bottom')
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Red)
    .padding({ top: this.topHeight, bottom: this.bottomHeight })
  }
}

2：设置expandSafeArea

直接设置该属性，可以设置当前页面的安全距离

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
 
  build() {
    Column() {
     Text('top')
      Blank()
     Text('bottom')
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Red)
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])//方法一 通过避开安全区
  }
}

效果图如下：