我在安卓版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});
}
}
它的工作,但有一个轻微的重叠状态栏上的应用程序,如下图
有什么快速、合适的方法可以纠正这一点
2条答案
按热度按时间3pvhb19x1#
如果要保持覆盖,则可以在
global.scss
中全局更新工具栏的样式:这种样式适合于这样的标题:
此样式仅适用于Android和
ion-header
中的第一个工具栏。如果您将使用不带ion-header
(或带有其他ion-header
结构)的页面,则应以类似的方式更新样式。vxqlmq5t2#
只是为了记录下另一次接近。
另一种简单的方法是将ionic的_forceStatusbarPadding属性添加到app.modules。
在这里您可以找到一个完整的叠加示例。https://github.com/heliomarpm/ionic-transparent_statusbar_demo
Imagem do exemplo