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

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 navigationBarHeight: number = 0

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('Page_testHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .onClick(async () => {
          const winObj = await window.getLastWindow(getContext())
          winObj.setWindowLayoutFullScreen(true) //true表示沉浸式布局开启
			//获取上面安全区域
          const statusBar = winObj.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM_GESTURE)
          this.statusBarHeight = px2vp(statusBar.topRect.height)
			//获取下面的安全区域
          const navigationBar = winObj.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
          this.navigationBarHeight = px2vp(navigationBar.bottomRect.height)

        })
    }
    //设置安全区域
    .margin({ top: this.statusBarHeight, bottom: this.navigationBarHeight })
    .backgroundColor(Color.Pink)
    .height('100%')
    .width('100%')
  }
}

4，工具类

import { window } from '@kit.ArkUI';
import { logger } from './Logger';

/**
 * 沉浸式工具
 */
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 = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM) 
        //存入存储
        AppStorage.setOrCreate('topHeight', px2vp(topArea.topRect.height))
        const bottomArea = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
        AppStorage.setOrCreate('bottomHeight', px2vp(bottomArea.bottomRect.height))
      }
    } catch (e) {
      logger.error('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) {
      logger.error('FullScreen disable', JSON.stringify(e))
    }
  }
}

export const fullScreen = new FullScreen()

export default class EntryAbility extends UIAbility {
 onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
     //上下文存下来，方便使用
    AppStorage.setOrCreate('context', this.context)
    this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }
  ···
  onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    fullScreen.enable() //开启沉浸式
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }
  ···
}

5，状态栏工具：

import { window } from '@kit.ArkUI'
import { logger } from './Logger'

class StatusBar {
  //黑色字体
  async setDarkBar() {
    await this.setBar({ statusBarContentColor: '#000000' })
  }

//白色字体
  async setLightBar() {
    await this.setBar({ statusBarContentColor: '#FFFFFF' })
  }

  async setBar(config: window.SystemBarProperties) {
    try {
      const context = AppStorage.get<Context>('context')
      if (context) {
        const win = await window.getLastWindow(context)
        //设置上方安全区域的样式
        await win.setWindowSystemBarProperties(config)
      }
    } catch (e) {
      logger.error('StatusBar setBar', JSON.stringify(e))
    }
  }
}

export const statusBar = new StatusBar()