鸿蒙Next(二) 屏蔽深色模式

    平时开发时直接在模拟器上运行的，也没有涉及主题相关的功能。换成真机运行时，发现很多页面变成深色的了，原来是手机开启了深色模式，没有设置背景颜色的页面会默认跟随主题颜色，导致页面显示混乱。

    但是暂时抽不出时间去适配深色模式，思考了一下鸿蒙中应该和iOS一样有个开关可以直接屏蔽深色模式、强制使用浅色模式。

    下面主要介绍：一键屏蔽深色模式、获取当前系统主题、监听系统主题变动、设置局部主题。

.

一、屏蔽深色模式

鸿蒙中是否和iOS一样可以直接屏蔽深色模式、强制使用浅色模式？

直接在 EntryAbility 的 onCreate 方法中实现以下代码就行了：

import { ConfigurationConstant } from '@kit.AbilityKit';

// 屏蔽深色模式 (COLOR_MODE_NOT_SET不设置 COLOR_MODE_DARK深色模式 COLOR_MODE_LIGHT浅色模式)
this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT)

.

二、atomicService

提供获取系统信息、系统设置等能力

1、获取系统信息（主题等）

• getSystemInfoSync（Sync）

包括：设备、网络状态、屏幕、语言、主题等系统信息

import { atomicService } from '@kit.ScenarioFusionKit';

// 1、获取设备信息（获取设备、网络状态、屏幕、语言、主题等系统信息）
getSystemInfo() {

  //系统信息属性取值类型
  let stateArray: Array<atomicService.SystemInfoType> =
    ['brand', 'deviceModel', 'screenWidth', 'screenHeight', 'language', 'osFullName', 'fontSizeSetting',
      'sdkApiVersion', 'bluetoothEnabled', 'wifiEnabled', 'locationEnabled', 'deviceOrientation', 'theme']

  try {
    let data = atomicService.getSystemInfoSync(stateArray)
    let brand: string | undefined = data.brand; //设备品牌名称
    let deviceModel: string | undefined = data.deviceModel; //设备类型
    let screenWidth: number | undefined = data.screenWidth; //屏幕的宽度
    let screenHeight: number | undefined = data.screenHeight; //屏幕的高度
    let language: string | undefined = data.language; //系统语言
    let osFullName: string | undefined = data.osFullName; //系统版本
    let fontSizeSetting: number | undefined = data.fontSizeSetting; //显示设备逻辑像素的密度
    let sdkApiVersion: number | undefined = data.sdkApiVersion; //系统软件API版本
    let bluetoothEnabled: boolean | undefined = data.bluetoothEnabled; //蓝牙
    let wifiEnabled: boolean | undefined = data.wifiEnabled; //Wi-Fi
    let locationEnabled: boolean | undefined = data.locationEnabled; //地理位置
    let deviceOrientation: string | undefined = data.deviceOrientation; //设备方向
    let theme: ColorMode | undefined = data.theme; //系统主题（深色、浅色模式）
  } catch (error) {
  }
}

• getSystemInfo（Promise）

包括：同上，使用Promise异步回调

//...
try {
  atomicService.getSystemInfo(stateArray).then((data: atomicService.SystemInfo) => {
    let theme: ColorMode | undefined = data.theme; //系统主题（深色、浅色模式）
    //...
  }).catch((error: BusinessError) => {
  })
} catch (error) {
}

.

2、获取系统设置属性（拓展）

• getSystemSetting

包括：蓝牙、位置、Wi-Fi状态和设备方向信息

import { atomicService } from '@kit.ScenarioFusionKit';

// 2、获取系统设置属性，包括蓝牙、位置、Wi-Fi状态和设备方向信息
getSystemSetting() {

  //系统设置属性取值类型
  let stateArray: Array<atomicService.SystemSettingType> =
    ['bluetoothEnabled', 'locationEnabled', 'deviceOrientation', 'wifiEnabled']

  try {
    let data = atomicService.getSystemSetting(stateArray)
    let bluetoothEnabled: boolean | undefined = data.bluetoothEnabled; //蓝牙
    let locationEnabled: boolean | undefined = data.locationEnabled; //定位
    let deviceOrientation: string | undefined = data.deviceOrientation; //设备方向
    let wifiEnabled: boolean | undefined = data.wifiEnabled; //wifi
  } catch (error) {
  }
}

.

三、@ohos.app.ability.Configuration

监听系统主题变动（定义环境变化信息）

import { UIAbility, AbilityConstant, EnvironmentCallback, Want } from '@kit.AbilityKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam) { //初始化
 
    //监听（更新系统配置时会触发下方回调）
    let envCallback: EnvironmentCallback = {
      onConfigurationUpdated(config) {

        //获取环境变化信息
        let colorMode = config.colorMode; //表示深浅色模式，默认为浅色
        let language = config.language; //应用程序的当前语言
        let direction = config.direction; //屏幕方向
        let screenDensity = config.screenDensity; //屏幕像素密度
        let displayId = config.displayId; //物理屏幕ID
        let hasPointerDevice = config.hasPointerDevice; //键鼠、触控板等是否连接
        //let fontId = config.fontId; //当前系统字体的唯一ID
        let fontSizeScale = config.fontSizeScale; //字体大小缩放比例
        let fontWeightScale = config.fontWeightScale; //字体粗细缩放比例
        let mcc = config.mcc; //移动设备国家代码
        let mnc = config.mnc; //移动设备网络代码
      },

      onMemoryLevel(level) { //
        console.log(`onMemoryLevel level: ${level}`);
      }
    };

    //执行
    try {
      let applicationContext = this.context.getApplicationContext(); //获取上下文
      let callbackId = applicationContext.on('environment', envCallback); //注册环境回调
    } catch (paramError) {
    }
  }
}

.

四、WithTheme：设置局部主题

用于设置应用局部页面自定义主题风格，可设置子组件深浅色模式和自定义配色。 

代码:

// 指定局部深浅色模式
@Component
export struct WithThemePage {

  build() {
    NavDestination() {
      // 自定义公共导航栏
      CommonNavBar({ title: 'WithTheme局部主题', showRightBt: true })

      Column() {

        // 系统默认
        Column() {
          Text('1')
          Text('默认')
        }
        .padding(30)
        .backgroundColor($r('sys.color.background_primary'))

        // 设置组件为深色模式
        WithTheme({ colorMode: ThemeColorMode.DARK }) {
          Column() {
            Text('2')
            Text('深色模式')
          }
          .padding(30)
          .backgroundColor($r('sys.color.background_primary'))
        }

        // 设置组件为浅色模式
        WithTheme({ colorMode: ThemeColorMode.LIGHT }) {
          Column() {
            Text('3')
            Text('浅色模式')
          }
          .padding(30)
          .backgroundColor($r('sys.color.background_primary'))
        }
      }
    }
    .hideTitleBar(true) //隐藏默认标题栏（返回按钮、标题）
  }
}