Ionic 4：状态栏溢出内容的问题

Question

我的应用程序有点问题，StatusBar 没有正确显示，如您所见：

我用Statusbar plugin 声明了StatusBar：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/

在app.component.ts

中

this.statusBar.overlaysWebView(true);
this.statusBar.show();

我可以为我所有的pages 和menu 设置一个自定义padding-top 吗？ 还是显示statusbar 的正确方法？

Answer 1

app.component.ts

initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.overlaysWebView(true);
      this.splashScreen.hide();
    });
  }

pages.ts

ionViewWillEnter() {
    this.statusBar.overlaysWebView(false); 
    this.statusBar.show();
  }

Answer 2

方法 1

您可以在 variable.scss

内将 padding-top 添加到 ion-toolbar

方法 2

你可以改变你的状态栏颜色，给你的标题颜色一样的颜色。

      this.statusBar.overlaysWebView(false)
      this.statusBar.styleDefault();
      this.statusBar.styleLightContent(); //Status bar color, light if you have dark header
      this.statusBar.backgroundColorByHexString('HERE YOUR CUSTOM COLOR VALUE');