android 的 Ionic 应用程序中与工具栏重叠的电容器透明状态栏

Question

我在 android 的离子应用程序中的 app.component.html 中设置了一个透明状态栏，如下所示：

import { Component,OnInit } from '@angular/core';
import { StatusBar,Style } from "@capacitor/status-bar";
import { Storage } from "@capacitor/storage";
import { Router } from "@angular/router";
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(
    public router:Router
  ) {}
  async shouldShowStarterScreen(){
    let hasSeenScreen = await Storage.get({key:"seenScreen"});
    if(hasSeenScreen.value == null){
      this.router.navigate(["starter-screen"]);
    }
  }
  slideOpts = {

  }
  async ngOnInit(){
    this.shouldShowStarterScreen();
  /*  await StatusBar.setStyle({style:Style.Dark})
    StatusBar.setBackgroundColor({
      color:"#3F00FF"
    })*/
    StatusBar.setOverlaysWebView({overlay:true});
  }
}

它可以正常工作，但应用上的状态栏略有重叠，如下所示

什么是快速、合适的纠正方法

Answer 1

如果你想保持覆盖，那么你可以在 global.scss:

中全局更新工具栏的样式

ion-header.md {
    ion-toolbar:first-child {
        --padding-top: 27px;
        height: 66px;
    }
}

这种风格适合 header 像这样：

<ion-header>
    <ion-toolbar color="primary">
        <ion-title>
            First title
        </ion-title>
    </ion-toolbar>

    <ion-toolbar>
        <ion-title>
            Second title
        </ion-title>
    </ion-toolbar>
</ion-header>

只有 Android 并且 ion-header 中的第一个工具栏才需要这种样式。如果您将使用不带 ion-header（或具有其他 ion-header 结构）的页面，您应该以类似的方式更新您的样式。

android 的 Ionic 应用程序中与工具栏重叠的电容器透明状态栏

Capacitor transparent status bar overlapping with toolbar in Ionic app for android

android

ionic-framework

angular

capacitor