先来对比一下几种状态栏的效果：
图1:初始化项目时的效果 图2: 改变背景色和字体颜色后的效果 图3:实现沉浸式透明悬浮后的效果
简单介绍一下ionic的StatusBar中的一些属性，具体内容请参见Ionic官方文档（/docs/v3/native/status-bar/）
一、改变状态栏背景字体样式，实现图2的效果
// ponent.tsimport { Platform } from 'ionic-angular';import { StatusBar } from '@ionic-native/status-bar';@Component({templateUrl: 'app.html'})export class MyApp {constructor(public platform: Platform, public statusBar: StatusBar) {this.platform.ready().then(() => {this.statusBar.styleDefault(); //深色文本this.statusBar.backgroundColorByHexString("#f8f8f8"); //浅色背景});}}
二、沉浸式效果，即图3所示的效果
1、在ponent.ts中将overlaysWebView设置为true,再将状态栏的文本色设置为深色文本（具体你们可以根据自己项目的标题栏背景色来设置）
// ponent.tsimport { Platform } from 'ionic-angular';import { StatusBar } from '@ionic-native/status-bar';@Component({templateUrl: 'app.html'})export class MyApp {constructor(public platform: Platform, public statusBar: StatusBar) {this.platform.ready().then(() => {this.statusBar.overlaysWebView(true);this.statusBar.styleDefault(); //深色文本});}}
2、在app.scss文件中设置标题栏的padding-top值和背景色
// app.scss.platform-android {// 沉浸式状态栏，设置header留出状态栏的位置ion-header {padding-top: #{$cordova-md-statusbar-padding};background-color: color($colors, head-color); //设置标题栏的背景色.toolbar-background {background-color: color($colors, head-color); //设置标题栏的背景色}}.immersive {padding-top: #{$cordova-md-statusbar-padding};}}//variables.scss$colors: (head-color: #f8f8f8;)
3、最后在StatusBar.java文件中的run方法里添加以下内容，代码中有注释。（文件路径：platforms ▸ android ▸ app ▸ src ▸ main ▸ java ▸ org ▸ apache ▸ cordova ▸ statusbar ▸ StatusBar.java）
// StatusBar.javathis.cordova.getActivity().runOnUiThread(new Runnable() {@Overridepublic void run() {// Clear flag FLAG_FORCE_NOT_FULLSCREEN which is set initially// by the Cordova.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);// Read 'StatusBarBackgroundColor' from config.xml, default is #000000.setStatusBarBackgroundColor(preferences.getString("StatusBarBackgroundColor", "#000000"));// Read 'StatusBarStyle' from config.xml, default is 'lightcontent'.setStatusBarStyle(preferences.getString("StatusBarStyle", "lightcontent"));}});
写完这三部分的代码就可以实现图3中的透明悬浮状态栏效果。
总结：
我自己在做这个沉浸式状态栏的效果时，其实前两步就基本上可以实现沉浸式效果，不过在我手机（HONOR V9）上测试时需要手动触发一下，比如点击input框。添加第3步的代码是为了在App启动时就能实现沉浸式效果，具体代码含义我还没有搞懂。但这样做又有一个缺点，假如你执行了ionic cordova platform rm android命令后，我们更改的这个StatusBar.java文件就会被删除，重新添加Android平台支持后，就会出现我之前遇到的问题，需要手动触发。所以建议这个沉浸式状态栏效果放到项目的最后来做。
最后，特别感谢大BUG在这个过程中对我的帮助和鼓励。
参考文档：
Ionic4沉浸式状态栏透明悬浮：/qq_31384551/article/details/82222944#commentsedit；
Cordova 实现沉浸式（透明）状态栏效果：/u010730897/article/details/74450922
