HarmonyOS 鸿蒙Next中如何设置状态栏颜色

HarmonyOS 鸿蒙Next中如何设置状态栏颜色 请问是否可以根据不同的NavDestination设置状态栏文字颜色

6 回复

可以参考如下demo:

import window from '@ohos.window';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct SetWindowSystemBarPropertiesDemo {
  @State message: string = 'Hello World';

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('SetWindowSystemBarPropertiesDemoHelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          let windowClass: window.Window | undefined = undefined;
          window.getLastWindow(getContext(),(err: BusinessError, data) => {
            windowClass = data
            let SystemBarProperties: window.SystemBarProperties = {
              statusBarColor: '#ff00ff',
              navigationBarColor: '#00ff00',
              //以下两个属性从API Version8开始支持
              statusBarContentColor: '#ffab0e0e',
              navigationBarContentColor: '#ffff0048'
            };
            try {
              let promise = windowClass.setWindowSystemBarProperties(SystemBarProperties);
              promise.then(() => {
                console.info('Succeeded in setting the system bar properties.');
              }).catch((err: BusinessError) => {
                console.error(`Failed to set the system bar properties. Cause code: ${err.code}, message: ${err.message}`);
              });
            } catch (exception) {
              console.error(`Failed to set the system bar properties. Cause code: ${exception.code}, message: ${exception.message}`);
            }
          })
        })
    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS 鸿蒙Next中如何设置状态栏颜色的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowsystembarproperties9

有要学HarmonyOS AI的同学吗，联系我：https://www.itying.com/goods-1206.html

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#systembarproperties

在HarmonyOS鸿蒙Next中，设置状态栏颜色可以通过修改config.json文件中的statusBar配置项来实现。具体步骤如下：

  1. 打开项目中的config.json文件。
  2. 在module节点下找到abilities节点，定位到需要设置状态栏颜色的页面。
  3. 在abilities节点下添加或修改statusBar配置项，设置backgroundColor属性为所需的颜色值（如#FF0000表示红色）。
  4. 保存并重新编译运行应用，状态栏颜色将更新为设置的颜色。

示例代码如下：

{
  "module": {
    "abilities": [
      {
        "name": ".MainAbility",
        "statusBar": {
          "backgroundColor": "#FF0000"
        }
      }
    ]
  }
}

通过这种方式，可以自定义状态栏的背景颜色，以适应应用的整体设计风格。

在HarmonyOS（鸿蒙）Next中，您可以通过修改主题资源文件来设置状态栏颜色。具体步骤如下：

  1. 打开主题资源文件：在项目的 resources/base/theme/ 目录下找到或创建 themes.json 文件。

  2. 定义状态栏颜色：在 themes.json 文件中，添加或修改 statusBarColor 属性。例如：

    {
  "name": "MyTheme",
  "statusBarColor": "#FF0000"
}

    这将状态栏颜色设置为红色。

  3. 应用主题：在应用的主配置文件 config.json 中，指定使用的主题：

    {
  "app": {
    "theme": "MyTheme"
  }
}

通过这些步骤，您可以自定义状态栏颜色以匹配您的应用设计。

回到顶部