在HarmonyOS NEXT开发中深色模式后状态栏看不到状态信息（时间、电量等）？

Question

在HarmonyOS NEXT开发中深色模式后状态栏看不到状态信息（时间、电量等）？

Answer 1

具体解决方案如下：

import { AbilityConstant, Configuration, UIAbility, Want } from '@kit.AbilityKit'; 
import { hilog } from '@kit.PerformanceAnalysisKit'; 
import { window } from '@kit.ArkUI'; 
import { BusinessError } from '@kit.BasicServicesKit'; 
 
export default class EntryAbility extends UIAbility { 
  colorMode: number | undefined = 0 
 
  onConfigurationUpdate(newConfig: Configuration): void { 
    this.colorMode = newConfig.colorMode 
    let windowStage: window.WindowStage | undefined = AppStorage.get('windowStage') 
    if (windowStage !== undefined) { 
      this.changeColor(windowStage) 
    } 
  } 
 
 
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); 
    this.colorMode = this.context.config.colorMode 
  } 
 
  onDestroy(): void { 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy'); 
  } 
 
  changeColor(windowStage: window.WindowStage) { 
    let windowClass: window.Window | null 
    windowStage.getMainWindow((err: BusinessError, data) => { 
      let errCode: number = err.code; 
      if (errCode) { 
        console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err)); 
        return; 
      } 
      windowClass = data; 
      console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(data)); 
 
      let sysBarProps: window.SystemBarProperties = { 
        statusBarColor: this.colorMode === 0 ? '#aa00ff0b' : '#ff00ff', 
        navigationBarColor: '#00ff00', 
        // 以下两个属性从API Version 8开始支持 
        statusBarContentColor: this.colorMode === 0 ? '#aaff0000' : '#ff002aff', 
        navigationBarContentColor: '#ffffff' 
      }; 
      windowClass.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => { 
        let errCode: number = err.code; 
        if (errCode) { 
          console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(err)); 
          return; 
        } 
        console.info('Succeeded in setting the system bar properties.'); 
      }); 
    }) 
  } 
 
 
  onWindowStageCreate(windowStage: window.WindowStage): void { 
    // Main window is created, set main page for this ability 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); 
    AppStorage.setOrCreate('windowStage', windowStage) 
 
    this.changeColor(windowStage) 
 
    windowStage.loadContent('pages/Index', (err) => { 
      if (err.code) { 
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); 
        return; 
      } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); 
    }); 
 
 
  } 
 
  onWindowStageDestroy(): void { 
    // Main window is destroyed, release UI related resources 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy'); 
  } 
 
  onForeground(): void { 
    // Ability has brought to foreground 
 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground'); 
  } 
 
  onBackground(): void { 
    // Ability has back to background 
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground'); 
  } 
}

Answer 2

页面状态栏的适配：

@State isDarkMode: boolean = false
@State barContentColor: string = ''
private context = getContext(this) as common.UIAbilityContext
// 状态栏适配黑夜模式
onPageShow(): void {

window.getLastWindow(getContext(this), (err, win) => {
  //判断是否是暗夜模式(因为有三种)
  if(this.context.config.colorMode==1){
    this.isDarkMode = false
  }
  if(this.context.config.colorMode==0){
    this.isDarkMode = true
  }
  //因为barContentColor只能取string类型的值，所以不能直接用resource资源来适配
  this.barContentColor = this.isDarkMode ? '#ffffff' : '#000000'

  let SystemBarProperties: window.SystemBarProperties = {
    statusBarContentColor: this.barContentColor
  };
})

}

具体案例可以参考链接：https://developer.huawei.com/consumer/cn/forum/topic/02081531...