跳到主要内容
版本:v2

状态栏

状态栏 API 提供了配置状态栏样式以及显示或隐藏状态栏的方法。

iOS 注意事项

此插件要求在 Info.plist 中将 "View controller-based status bar appearance"(UIViewControllerBasedStatusBarAppearance)设置为 YES。请阅读配置 iOS 获取帮助。

状态栏可见性默认为可见,样式默认为 StatusBarStyle.Light。您可以通过在 Info.plist 中添加 UIStatusBarHidden 和/或 UIStatusBarStyle 来更改这些默认值。

setBackgroundColorsetOverlaysWebView 目前不支持 iOS 设备。

事件

  • statusTap

示例

// 事件(仅 iOS)
window.addEventListener('statusTap', function () {
console.log('状态栏被点击');
});

// API
import { Plugins, StatusBarStyle } from '@capacitor/core';

const { StatusBar } = Plugins;

export class StatusBarExample {
isStatusBarLight = true;

changeStatusBar() {
StatusBar.setStyle({
style: this.isStatusBarLight ? StatusBarStyle.Dark : StatusBarStyle.Light,
});
this.isStatusBarLight = !this.isStatusBarLight;

// 在透明状态栏下显示内容(仅 Android)
StatusBar.setOverlaysWebView({
overlay: true,
});
}

hideStatusBar() {
StatusBar.hide();
}

showStatusBar() {
StatusBar.show();
}
}

API

setStyle(...)

setStyle(options: StatusBarStyleOptions) => Promise<void>

设置状态栏的当前样式

参数类型
options
StatusBarStyleOptions

setBackgroundColor(...)

setBackgroundColor(options: StatusBarBackgroundColorOptions) => Promise<void>

设置状态栏的背景颜色

参数类型
options
StatusBarBackgroundColorOptions

show(...)

show(options?: StatusBarAnimationOptions) => Promise<void>

显示状态栏

参数类型
options
StatusBarAnimationOptions

hide(...)

hide(options?: StatusBarAnimationOptions) => Promise<void>

隐藏状态栏

参数类型
options
StatusBarAnimationOptions

getInfo()

getInfo() => Promise<StatusBarInfoResult>

获取状态栏当前状态的信息

返回:

Promise<StatusBarInfoResult>


setOverlaysWebView(...)

setOverlaysWebView(options: StatusBarOverlaysWebviewOptions) => Promise<void>

设置状态栏是否应覆盖 webview,以允许使用设备"刘海"周围的空间。

参数类型
options
StatusBarOverlaysWebviewOptions

接口

StatusBarStyleOptions

属性类型
style
StatusBarStyle

StatusBarBackgroundColorOptions

属性类型
colorstring

StatusBarAnimationOptions

属性类型描述
animation
StatusBarAnimation
仅 iOS。显示或隐藏时使用的状态栏动画类型。

StatusBarInfoResult

属性类型
visibleboolean
style
StatusBarStyle
colorstring
overlaysboolean

StatusBarOverlaysWebviewOptions

属性类型
overlayboolean

枚举

StatusBarStyle

成员描述
Dark"DARK"深色背景上的浅色文字。
Light"LIGHT"浅色背景上的深色文字。

StatusBarAnimation

成员描述
None"NONE"显示/隐藏时无动画。
Slide"SLIDE"显示/隐藏时滑动动画。
Fade"FADE"显示/隐藏时淡入淡出动画。