HarmonyOS 鸿蒙Next如何按Component 页面设置status bar的背景和文字颜色

发布于 1周前 作者 htzhanglong 来自 鸿蒙OS

HarmonyOS 鸿蒙Next如何按Component 页面设置status bar的背景和文字颜色

比如A页面 是红色的头,而router 跳转到B页面的时候需要白色的头

3 回复

1、工具类GlobalContext

export class GlobalContext {
  private constructor() { }
  private static instance: GlobalContext;
  private _objects = new Map<string, Object>();
  public static getContext(): GlobalContext {
    if (!GlobalContext.instance) {
      GlobalContext.instance = new GlobalContext();
    }
    return GlobalContext.instance;
  }
  getObject(value: string): Object | undefined {
    return this._objects.get(value);
  }
  setObject(key: string, objectClass: Object): void {
    this._objects.set(key, objectClass);
  }
}

2、EntryAbility获取窗口实例

onWindowStageCreate(windowStage: window.WindowStage): void {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
 //获取窗口实例,并将窗口实例封装到工具类
     let windowClass: window.Window | undefined = undefined; 
          try { 
              window.getLastWindow(this.context, (err: BusinessError, data) => { 
                  const errCode: number = err.code; 
                  if (errCode) { 
                      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
                       return; 
                    } 
                    windowClass = data; 
                    GlobalContext.getContext().setObject("window",windowClass) 
                    console.info('Succeeded in obtaining the top window. Data: ' + JSON.stringify(data)); }); 
                } catch (exception) { 
                    console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception)); 
                } 
            } 
      hilog.info(0x0000, 'testTag', 'Succeeded in loading the content. Data: %{public}s', JSON.stringify(data) ?? '');
    });
}

3、在index页面设置状态栏状态

import { BusinessError } from '@ohos.base';
let SystemBarProperties: window.SystemBarProperties = {
  statusBarColor: '#ff00ff',
  navigationBarColor: '#00ff00',
  //以下两个属性从API Version8开始支持
  statusBarContentColor: '#ffffff',
  navigationBarContentColor: '#00ffff'
};
try {
  windowClass.setWindowSystemBarProperties(SystemBarProperties, (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));
}

更多关于HarmonyOS 鸿蒙Next如何按Component 页面设置status bar的背景和文字颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


router靠window 在Entry的生命周期里面靠window设置。附赠一个api

let windowClass = window.findWindow(this.getUIContext().getWindowName())

Navigation 靠systemBarStyle来定义

在HarmonyOS 鸿蒙Next中,可以通过配置Component页面的相关属性来设置status bar的背景和文字颜色。以下是实现方法:

  1. 修改配置文件: 在config.json文件中,添加或修改以下配置来定义全局的statusBar样式。

    "module": {
        "package": "your.package.name",
        "ability": [
            {
                "name": "your.ability.name",
                "windowConfig": {
                    "statusBarColor": "#FF0000", // 设置状态栏背景颜色
                    "statusBarTextColor": "#FFFFFF" // 设置状态栏文字颜色
                }
            }
        ]
    }
    
  2. 代码动态设置: 如果需要在代码中动态调整,可以通过WindowManager API进行设置。

    import window from '[@ohos](/user/ohos).window';
    
    let windowManager = window.getWindowManager();
    windowManager.setStatusBarColor('#FF0000'); // 设置状态栏背景颜色
    windowManager.setStatusBarTextColor('#FFFFFF'); // 设置状态栏文字颜色
    

请注意,上述代码中的颜色值使用十六进制表示,可以根据需要进行调整。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部