HarmonyOS 如何动态设置StatusBar内的字体颜色？

Question

APP设置了沉浸式布局，在切换主题颜色的时候，最顶部的状态栏字体颜色不会变化，请问该怎么处理？下面的代码时我们的设置方式：

private checkDarkMode(darkModeConfig: DarkModeSettingsConfig): void {
  AppStorage.setOrCreate<DarkModeSettingsConfig>('darkModeConfig', darkModeConfig);
  let applicationContext = getContext(this).getApplicationContext();
  let colorMode: ConfigurationConstant.ColorMode = ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET;
  if (darkModeConfig.switchType === DarkModeType.FOLLOW_UP) {
  colorMode = (getContext(this) as common.UIAbilityContext).config.colorMode ||
  ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
} else if (darkModeConfig.switchType === DarkModeType.DARK) {
  colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_DARK;
} else {
  colorMode = ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;
}
AppStorage.setOrCreate('currentColorMode', colorMode);
applicationContext.setColorMode(colorMode);
try {
  AppUtil.getMainWindow()?.setWindowSystemBarProperties({
    statusBarContentColor: colorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK ?  '0xffffffff' : '0x00000000',
  }, (err: BusinessError) => {
    const 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.');
  });
} catch (exception) {
  console.error('Failed to set the system bar properties. Cause: ' + JSON.stringify(exception));
}
}

Answer 1

目前设置状态栏颜色是使用窗口的API，调整维度是从整个窗口进行调整。需要做到页面的级别的话就需要在页面的生命周期中进行调整控制，在需要改变的页面直接调用setWindowSystemBarProperties方法。 可以参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-window-0000001820880785\#ZH-CN\_TOPIC\_0000001811317218\_\_setwindowsystembarproperties9

示例代码如下：

onPageShow(): void {
  window.getLastWindow(getContext(), (err, data) => {
  let win: window.Window;
  if (err.code) {
  console.error("error code :" + JSON.stringify(err.code))
  return;
}
try {
  win = data;
  //设置窗口为全屏模式
  win.setWindowLayoutFullScreen(true);
  // 设置状态栏
  win.setWindowSystemBarProperties({
    // 设置状态栏颜色为其他颜色
    statusBarColor: '#00ff00',
    // 设置状态栏文本颜色为白色
    statusBarContentColor: '#353535'
  })
  console.info('带状态栏沉浸式窗口设置完成')
} catch (expextion) {
  console.error("error cause :" + JSON.stringify(expextion))
}
})
}
//demo实现使用API10, 完整demo如下：
import window1 from '@ohos.window';
import { BusinessError } from '@ohos.base';
import Stack from '@ohos.util.Stack';


class StatusBarColor {
  statusBarColor: string;
  statusBarContentColor: string

  constructor(statusBarColor: string, statusBarContentColor: string) {
    // 状态栏背景
    this.statusBarColor = statusBarColor;
    // 状态栏内容
    this.statusBarContentColor = statusBarContentColor;
  }
}

export class StatusBarUtils {
  static testNumber: number = 0;
  private static barColor: Stack<StatusBarColor> = new Stack();

  private static setBarColor(statusBarColor: StatusBarColor) {
    let mainWindow: window1.Window | undefined = AppStorage.get("mainWindow")
    let sysBarProps: window1.SystemBarProperties = {
      statusBarColor: statusBarColor.statusBarColor,
      statusBarContentColor: statusBarColor.statusBarContentColor,
    };
    mainWindow?.setWindowSystemBarProperties(sysBarProps, (err: BusinessError) => {
      let errCode: number = err.code;
      if (errCode) {
        console.error('[StaticUtils] Failed to set the system bar properties. Cause: ' + JSON.stringify(err));
        return;
      }
      console.info('[StaticUtils] Succeeded in setting the system bar properties.');
    });
  }

  static pushStatusColor(statusBarColor: string, statusBarContentColor: string) {
    StatusBarUtils.barColor.push(new StatusBarColor(statusBarColor, statusBarContentColor))
    StatusBarUtils.setBarColor(StatusBarUtils.barColor.peek());
  }

  static popStatusColor() {
    if (!StatusBarUtils.barColor.isEmpty()) {
      StatusBarUtils.barColor.pop();
      if (!StatusBarUtils.barColor.isEmpty()) {
        StatusBarUtils.setBarColor(StatusBarUtils.barColor.peek());
      }
    }
  }
}