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

56lgkhnf  于 2022-12-16  发布在  Ionic
关注(0)|答案(2)|浏览(138)

我在安卓版ionic应用的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});
  }
}

它的工作,但有一个轻微的重叠状态栏上的应用程序,如下图

有什么快速、合适的方法可以纠正这一点

3pvhb19x

3pvhb19x1#

如果要保持覆盖,则可以在global.scss中全局更新工具栏的样式:

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

这种样式适合于这样的标题:

<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结构)的页面,则应以类似的方式更新样式。

vxqlmq5t

vxqlmq5t2#

只是为了记录下另一次接近。
另一种简单的方法是将ionic的_forceStatusbarPadding属性添加到app.modules。
在这里您可以找到一个完整的叠加示例。https://github.com/heliomarpm/ionic-transparent_statusbar_demo
Imagem do exemplo

相关问题