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

方法一

您可以在 variable.scss

中添加 padding-top 到 ion-toolbar

方法二

您可以更改状态栏颜色，使用与 header 颜色相同的颜色。

      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');

Answer 2

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();
  }