Ionic实现透明状态栏，主要针对Android进行处理

最新推荐文章于 2021-04-14 15:07:38 发布

Raytheon107

最新推荐文章于 2021-04-14 15:07:38 发布

阅读量974

点赞数

本文链接：https://blog.csdn.net/Raytheon107/article/details/82733934

版权

第一步: 在platforms/android/src/../../MainActivity.java路径下MainActivity.java() 中的super.onCreate() 函数后添加如下代码并在MainActivity.java导入依赖包：

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
   getWindow().getDecorView().setSystemUiVisibility(
       View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN |
       View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
}

import android.os.Build;
import android.view.View;

第二步:在项目根目录的config.xml文件中添加下面配置，前两位是透明度，后六位是RGB颜色值．可以根据自己的需要配置。

<preference name="StatusBarBackgroundColor" value="#10ffffff" />

第三步: 在app.scss中添加样式

//Ionic实现透明状态栏，主要针对Android进行处理
.platform-android {
  ion-navbar{
    padding-top: 25px;
    ion-title{
      margin-top: 10px;
    }
  }
}

以上是基本配置。

在每个页面可能会根据界面颜色的不同，对字体颜色进行相应的调整，具体页面中的使用如下：

import {StatusBar} from "@ionic-native/status-bar";

@IonicPage()
@Component({
  selector: 'page-my',
  templateUrl: 'my.html'
})

export class MyPage {

  constructor(private statusBar:StatusBar) {

  }

  ionViewDidEnter(){
    this.statusBar.styleDefault(); //设置手机状态栏字体颜色
  }
}