HarmonyOS 鸿蒙Next如何自由设置状态栏颜色并隐藏底部导航条 有办法吗 能给个demo吗

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

HarmonyOS 鸿蒙Next如何自由设置状态栏颜色并隐藏底部导航条 有办法吗 能给个demo吗

想要能够自由的设置状态栏颜色，但是又要隐藏掉底部导航条，请问有什么办法？可以给个demo看看吗

Harmonyos Next教程
3 回复

隐藏掉底部导航条：

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

设置状态栏颜色：

参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowsystembarproperties9

参考demo


 async setSystemBar() {

    // 获取当前应用窗口

    let windowClass: window.Window = await window.getLastWindow(getContext(this))

    // 前提：设置窗口为全屏窗口

    windowClass.setWindowLayoutFullScreen(true);

    //设置窗口全屏模式时导航栏、状态栏、底部导航条的显示和隐藏，使用Promise异步回调。

    try {

      let promise = windowClass.setSpecificSystemBarEnabled('navigationIndicator', false);

      promise.then(() => {

        console.info('Succeeded in setting the system bar to be invisible.');

      }).catch((err: BusinessError) => {

        console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(err));

      });

    } catch (exception) {

      console.error('Failed to set the system bar to be invisible. Cause:' + JSON.stringify(exception));

    }

    // 设置窗口全屏模式时窗口内导航栏、状态栏的属性，使用callback异步回调。

    await windowClass.setWindowSystemBarProperties({

      // 颜色属性为ARGB，将蒙尘设置为0%使其透明

      // 导航栏颜色

      navigationBarColor: '#fd121de5',

      // 状态栏颜色

      statusBarColor: '#ff0ad9c2',

      // 导航栏文字颜色

      navigationBarContentColor: '#fde20606',

      // 状态栏文字颜色

      statusBarContentColor: '#fff1e50a'

    })

  }

  aboutToAppear() {

    this.setSystemBar()

  }

~~~

更多关于HarmonyOS 鸿蒙Next如何自由设置状态栏颜色并隐藏底部导航条 有办法吗 能给个demo吗的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


+1

HarmonyOS 鸿蒙Next支持自由设置状态栏颜色并隐藏底部导航条，以下是实现方法及相关Demo代码：

设置状态栏颜色

可以使用window.setWindowSystemBarProperties方法动态设置状态栏颜色。该方法允许配置一个对象，包括statusBarColor（状态栏背景色）和statusBarContentColor（状态栏文字颜色）等属性。

Demo代码：

import { window } from '@kit.arkui';

function changeStatusBarColor() {
  window.getLastWindow(getContext(), (err, win) => {
    if (err.code) {
      console.error("Error getting window: " + JSON.stringify(err.code));
      return;
    }
    win.setWindowSystemBarProperties({
      statusBarColor: '#ff0000', // 红色背景
      statusBarContentColor: '#ffffff' // 白色文字
    });
  });
}

隐藏底部导航条

使用setWindowSystemBarEnable接口可设置导航栏为隐藏状态。建议在ability的onWindowStageCreate生命周期中设置，以确保窗口信息已正确获取。

Demo代码：

import window from '@ohos.window';
import common from '@ohos.app.ability.common';

@Entry
@Component
struct Type3 {
  @State message: string = 'Hello World'
  context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext

  async setSystemBar() {
    let windowClass = await window.getLastWindow(this.context);
    await windowClass.setWindowSystemBarEnable([]); // 隐藏导航栏
  }

  aboutToAppear() {
    this.setSystemBar();
  }
  // ...build方法内容
}

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

回到顶部