【学习笔记】HBuilder状态栏隐藏显示及颜色

本文链接：https://blog.csdn.net/create_jeff/article/details/50472145

本文整理了在HBuilder中管理状态栏的方法，包括如何设置iOS7及以上系统的状态栏背景颜色、如何在Android平台上操作，以及状态栏的隐藏和显示技巧。通过mui.init()和plusready事件可以实现状态栏颜色动态变化，同时提到Android无法自定义状态栏样式，但可通过修改AndroidManifest.xml设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在看HBuilder文档时针对顶部状态栏如何隐藏/显示及如何设定颜色有一些疑问，也看了不少人问得问题和解答，总结出来几个方法，和大家分享下

默认的含mui的html文件都会包含

<script type="text/javascript" charset="utf-8">
    mui.init();
</script>

设置系统状态栏背景颜色（iOS7及以上生效）

mui.init()方法是用来初始化内容页面，在这里可以直接设置状态栏的颜色

<script type="text/javascript" charset="utf-8">
    mui.init({
        statusBarBackground:"#FF0000"
    });
</script>

还可以在plusready中增加事件的方式来实现：

<script type="text/javascript">
  document.addEventListener('plusready',function(){
        plus.navigator.setStatusBarBackground("#FF0000");
  },false);
</script>

这个方法适用于动态改变状态栏颜色，可以直接这么写，也可以封装成一个函数，再调用

<script type="text/javascript">
    function setStatusbarRed(){
      // 设置系统状态栏背景色为红色
       plus.navigator.setStatusBarBackground("#FF0000");
    }

    document.addEventListener('plusready',function(){
            setStatusbarRed();
    },false);
</script>

设置状态栏透明并且页面内容通顶，可以参考http://ask.dcloud.net.cn/article/118

Android平台暂时不支持自定义系统状态栏样式

但可以通过离线打包在AndroidManifest.xml中配置主Activity的皮肤(android:theme)来设置：

<activity
      android:name="io.dcloud.PandoraEntry"
               android:configChanges="orientation|keyboardHidden|screenSize"
       android:label="@string/app_name"
       android:launchMode="singleTask"
       android:screenOrientation="sensor"
       android:windowSoftInputMode="adjustResize"
       android:theme="主Activity的皮肤"
       android:exported="true">
       <intent-filter>
           <action android:name="android.intent.action.MAIN"/>
           <category android:name="android.intent.category.LAUNCHER"/>
       </intent-filter>
   </activity>