鸿蒙之设置沉浸式布局原创

hm小林

发布于 2025-3-29 17:06

浏览

0收藏

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

方法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()
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.

其次，在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) => {
1.
2.
3.
4.
5.
6.
7.

最后在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 })
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.

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])//方法一 通过避开安全区
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.