首页 鸿蒙 正文
  • 本文约1773字,阅读需9分钟
  • 178
  • 0

鸿蒙开发沉浸式状态栏颜色

温馨提示:本文最后更新于2024年10月19日 08:37,若内容或图片失效,请在下方留言或联系博主。

典型应用全屏窗口UI元素包括状态栏、应用界面和底部导航条,其中状态栏和导航条,通常在沉浸式布局下称为避让区;避让区之外的区域称为安全区。开发应用沉浸式效果主要指通过调整状态栏、应用界面和导航条的显示效果来减少状态栏导航条等系统界面的突兀感,从而使用户获得最佳的UI体验。---> 开发应用沉浸式效果

// 作用:用来开启或关闭 沉浸式方法
import { window } from '@kit.ArkUI'

export class WindowManager {
  // 开启全屏
  static enableFullScreen() {
    // 获取到当前的窗口
    window.getLastWindow(getContext()).then((windowStage: window.Window) => {
      // 开启全屏 =》 开启沉浸式模式
      windowStage.setWindowLayoutFullScreen(true) // true 开启全屏 false 关闭全屏

      // 获取安全区域的高度
      const area = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
      const h = area.topRect.height // 获取到当前设备窗口 的安全区域高度
      // 首先 获取到的安全区高度是 px 的格式
      const height = px2vp(h) // 把 px转成 pv
      AppStorage.setOrCreate('TopHeight', height) // 将高度这个值 赋值给 AppStorage即可
    })
  }

  // 关闭全屏  -- 项目中 并没有用 保留
  static disableFullScreen() {
    // 获取到当前的窗口
    window.getLastWindow(getContext()).then((windowStage: window.Window) => {
      // 开启全屏 =》 开启沉浸式模式
      windowStage.setWindowLayoutFullScreen(false) // true 开启全屏 false 关闭全屏

      // 获取安全区域的高度 没有 安全区了 高度就设置为0就可以
      AppStorage.setOrCreate('TopHeight', 0) // 将高度这个值 赋值给 AppStorage即可
    })
  }

  // 状态栏文字颜色设置为白色

  static staticsettingStatusBarLight() {
    window.getLastWindow(getContext()).then((windowStage: window.Window) => {
      // 设置颜色
      windowStage.setWindowSystemBarProperties({ statusBarContentColor: '#FFFFFF' }) // 白色
    })
  }

  // 状态栏文字颜色设置为黑色
  static settingStatusBarDark() {
    window.getLastWindow(getContext()).then((windowStage: window.Window) => {
      // 设置颜色
      windowStage.setWindowSystemBarProperties({ statusBarContentColor: '#000000' }) // 黑色
    })
  }
}

简约版:

 // 非 2in1 模式下开启 沉浸式导航
      if (deviceInfo.deviceType != '2in1') {
        // 开启全屏
        const win = windowStage.getMainWindowSync()
        win.setWindowLayoutFullScreen(true)

        // 获取安全区域
        const top = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
          .topRect
        AppStorage.setOrCreate<number>('safeTop', px2vp(top.height))
        const bottom = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
          .bottomRect
        AppStorage.setOrCreate<number>('safeBottom', px2vp(bottom.height))
      }
评论