首先安装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);
//增加代码结束
真机运行,华为机型完美适配。