跳到主要内容
版本:v6

@capacitor/status-bar

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

安装

npm install @capacitor/status-bar
npx cap sync

iOS 注意事项

本插件要求在 Info.plist 中将 "基于视图控制器的状态栏外观" (UIViewControllerBasedStatusBarAppearance) 设为 YES。如需帮助请查阅 iOS 配置指南

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

当前 iOS 设备不支持 setBackgroundColorsetOverlaysWebView 方法。

示例

import { StatusBar, Style } from '@capacitor/status-bar';

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

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

const setStatusBarStyleDark = async () => {
await StatusBar.setStyle({ style: Style.Dark });
};

const setStatusBarStyleLight = async () => {
await StatusBar.setStyle({ style: Style.Light });
};

const hideStatusBar = async () => {
await StatusBar.hide();
};

const showStatusBar = async () => {
await StatusBar.show();
};

API

setStyle(...)

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

设置状态栏当前样式。

参数类型
options
StyleOptions

始于: 1.0.0


setBackgroundColor(...)

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

设置状态栏背景颜色。

此方法仅在 Android 上受支持。

参数类型
options
BackgroundColorOptions

始于: 1.0.0


show(...)

show(options?: AnimationOptions | undefined) => Promise<void>

显示状态栏。 在 iOS 上,如果状态栏初始隐藏且初始样式设为 UIStatusBarStyleLightContent,首次调用 show 时可能会出现动画闪烁,文本先显示为深色再过渡为浅色。建议首次调用时使用 Animation.None 作为动画类型。

参数类型
options
AnimationOptions

始于: 1.0.0


hide(...)

hide(options?: AnimationOptions | undefined) => Promise<void>

隐藏状态栏。

参数类型
options
AnimationOptions

始于: 1.0.0


getInfo()

getInfo() => Promise<StatusBarInfo>

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

返回值:

Promise<StatusBarInfo>

始于: 1.0.0


setOverlaysWebView(...)

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

设置状态栏是否覆盖 WebView,以便使用其下方空间。

此方法仅在 Android 上受支持。

参数类型
options
SetOverlaysWebViewOptions

始于: 1.0.0


Interfaces

StyleOptions

属性类型描述始于
style
Style
状态栏文本的样式1.0.0

BackgroundColorOptions

属性类型描述始于
colorstring设置状态栏颜色的十六进制值。此选项仅在 Android 上受支持。1.0.0

AnimationOptions

属性类型描述默认值始于
animation
Animation
显示或隐藏状态栏时使用的动画类型。此选项仅在 iOS 上受支持。Animation.Fade1.0.0

StatusBarInfo

属性类型描述始于
visibleboolean状态栏是否可见。1.0.0
style
Style
当前状态栏样式。1.0.0
colorstring当前状态栏颜色。此选项仅在 Android 上受支持。1.0.0
overlaysboolean状态栏是否处于覆盖模式。此选项仅在 Android 上受支持。1.0.0

SetOverlaysWebViewOptions

属性类型描述始于
overlayboolean是否让状态栏覆盖内容区域。1.0.0

Enums

Style

成员描述始于
Dark'DARK'深色背景上的浅色文本。1.0.0
Light'LIGHT'浅色背景上的深色文本。1.0.0
Default'DEFAULT'样式基于设备外观。如果设备使用深色模式,状态栏文本将显示为浅色;如果设备使用浅色模式,则显示为深色。在 Android 上,默认样式为应用启动时的样式。1.0.0

Animation

成员描述始于
None'NONE'显示/隐藏时不使用动画。1.0.0
Slide'SLIDE'显示/隐藏时使用滑动动画(iOS 15+ 上无效)。1.0.0
Fade'FADE'显示/隐藏时使用淡入淡出动画。1.0.0