Ionic4安卓沉浸式状态栏设置，华为机型无效解决方法

最新推荐文章于 2021-05-13 17:06:35 发布

刘剑这个人

最新推荐文章于 2021-05-13 17:06:35 发布

阅读量1.3k

点赞数 1

分类专栏： ionic javascript 文章标签： android

本文链接：https://blog.youkuaiyun.com/jianren0518/article/details/107461925

版权

ionic 同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

首先安装statusBar插件，本次使用插件statusBar版本2.4.2
https://github.com/apache/cordova-plugin-statusbar
Ionic4中IOS自动适配沉浸式状态栏，安卓需要在代码中开启：
app.component.ts构造方法中增加 this.statusBar.overlaysWebView(true);

...
constructor(
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // 增加代码开始
      this.statusBar.overlaysWebView(true);//设置webView全屏覆盖，实现沉浸式状态栏
      // 增加代码结束
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }
...

设置后真机运行发现安装状态栏和页面导航调重叠，如图：
在这里插入图片描述

在global.scss中单独设置安卓safe area top的高度

/*设置安卓安全区域top高度 预留出状态栏区域*/
:root {
    .md{
      --ion-safe-area-top: 32px;
    }
}

safe area可设置顶部、底部、左、右，可根据实际情况设置，设置完后真机运行如图：
在这里插入图片描述
以上配置在大多数机型可实现沉浸式状态栏，但在华为机型上无效果，查询后发现需要修改控件源码
插件目录下 \plugins\cordova-plugin-statusbar\src\android\StatusBar.java文件59行增加以下内容

	...
	Window window = cordova.getActivity().getWindow();
	// 增加代码开始
	window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
    window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
    window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
    window.setStatusBarColor(Color.TRANSPARENT);
    window.setNavigationBarColor(Color.TRANSPARENT);
	//增加代码结束
    window.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
	...

以上可实现华为机型沉浸状态栏，但还有问题，如果手机开启了虚拟按键，按键和页面区域重叠，继续研究StatusBar.java
229行 setStatusBarTransparent方法中增加以下内容

	window.setStatusBarColor(Color.TRANSPARENT);
	// 增加代码开始
	window.clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION);
	//增加代码结束

真机运行，华为机型完美适配。