Harmony OS5 Ark TS 封装沉浸式工具和状态栏工具/屏上的安全区域文字封装

原创

已于 2025-06-12 09:22:04 修改 · 216 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#安全 #前端 #鸿蒙 #鸿蒙系统 #harmonyos

于 2025-06-03 20:39:29 首次发布

Ark TS 封装沉浸式工具

1，设置沉浸式布局

const winObj = await window.getLastWindow(getContext())
winObj.setWindowLayoutFullScreen(true) //true表示沉浸式布局开启

2，但第二个问题来了，内容会侵入安全区域。需要设置上下的安全区域

@State statusBarHeight: number = 0
//获取上面安全区域
const statusBar = winObj.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM_GESTURE)
this.statusBarHeight = px2vp(statusBar.topRect.height)

@State navigationBarHeight: number = 0
//获取下面的安全区域
const navigationBar = winObj.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
this.navigationBarHeight = px2vp(navigationBar.bottomRect.height)

3，demo演示

import { window } from '@kit.ArkUI';

@Entry
@Component
struct Page_test {
  @State message: string = 'Hello World';
  @State statusBarHeight: number = 0
  @State n