主题处理类

/**
 * ThemeManager 类处理主题设置,包括:
 * 1. 颜色模式设置
 * 2. 沉浸式模式设置
 * 3. 通知栏设置

 */
import { ConfigurationConstant } from '@kit.AbilityKit'
import { window } from '@kit.ArkUI'

class ThemeManager {
  windowStage: window.Window | null = null

  /** 异步获取 WindowStage */
  async getWindowStage() {
    if (this.windowStage) {
      return this.windowStage
    } else {
      return await window.getLastWindow(getContext())
    }
  }

  /** 初始化主题设置 */
  initThemeSetting() {
    const app = getContext()
      .getApplicationContext()
    app.on('environment', {
      onConfigurationUpdated: (config) => {
        AppStorage.set('colorMode', config.colorMode)
        if (config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
          this.settingStatusBarBlack()
        }
        if (config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
          this.settingStatusBarWhite()
        }
        if (config.colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET) {
          // TODO: 处理未设置颜色模式
        }
      },
      onMemoryLevel: (_level) => {
        // TODO: 处理内存级别变化
      }
    })
    // 默认为浅色模式
    const initColorMode = AppStorage.get<ConfigurationConstant.ColorMode>('initColorMode')
    PersistentStorage.persistProp('colorMode', initColorMode)
    const currentColorMode = AppStorage.get<ConfigurationConstant.ColorMode>('colorMode')
    app.setColorMode(currentColorMode)
  }

  /** 设置状态栏为白色 */
  settingStatusBarWhite() {
    this.settingStatusBar({ statusBarContentColor: '#FFFFFF' })
  }

  /** 设置状态栏为黑色 */
  settingStatusBarBlack() {
    this.settingStatusBar({ statusBarContentColor: '#000000' })
  }

  /**
   * 设置状态栏。
   * @param {window.SystemBarProperties} config 窗口系统栏属性配置。
   */

  settingStatusBar(config: window.SystemBarProperties) {
    this.getWindowStage()
      .then((windowStage: window.Window) => {
        windowStage.setWindowSystemBarProperties(config)
      })
  }

  /** 启用全屏模式 */
  enableFullScreen() {
    this.getWindowStage()
      .then((windowStage: window.Window) => {
        windowStage.setWindowLayoutFullScreen(true)
        const topArea = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM)
        AppStorage.setOrCreate('topHeight', px2vp(topArea.topRect.height))
        const bottomArea = windowStage.getWindowAvoidArea(window.AvoidAreaType.TYPE_NAVIGATION_INDICATOR)
        AppStorage.setOrCreate('bottomHeight', px2vp(bottomArea.bottomRect.height))
      })
  }

  /** 禁用全屏模式 */
  disableFullScreen() {
    this.getWindowStage()
      .then((windowStage: window.Window) => {
        windowStage.setWindowLayoutFullScreen(false)
        AppStorage.setOrCreate('topHeight', 0)
        AppStorage.setOrCreate('bottomHeight', 0)
      })
  }
}

export const themeManager = new ThemeManager()

//用法(生命周期)

 aboutToAppear() {
    // 开启沉浸式
    themeManager.enableFullScreen()
  }

  aboutToDisappear() {
    // 关闭沉浸式
    themeManager.disableFullScreen()
  }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值