跳至主要內容
版本：v8

@capacitor/status-bar

StatusBar API 提供設定狀態列樣式的方法，以及顯示或隱藏狀態列。

安裝​

npm install @capacitor/status-bar
npx cap sync

iOS 注意事項​

此外掛程式需要在 Info.plist 中將「View controller-based status bar appearance」（UIViewControllerBasedStatusBarAppearance）設定為 YES。請閱讀設定 iOS 以取得協助。

狀態列的預設可見性為可見，樣式預設為 Style.Default。您可以透過在 Info.plist 中新增 UIStatusBarHidden 和/或 UIStatusBarStyle 來變更這些預設值。

setBackgroundColor 和 setOverlaysWebView 目前在 iOS 裝置上不支援。

範例​

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

// iOS only
window.addEventListener('statusTap', function () {
  console.log('statusbar tapped');
});

// Display content under transparent status bar (Android only)
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>

設定狀態列的目前樣式。

參數類型
optionsStyleOptions

起始版本 1.0.0

setBackgroundColor(...)​

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

設定狀態列的背景顏色。

此方法僅在 Android 上支援。

參數類型
optionsBackgroundColorOptions

起始版本 1.0.0

show(...)​

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

顯示狀態列。在 iOS 上，如果狀態列一開始是隱藏的，且初始樣式設定為 UIStatusBarStyleLightContent，則第一次顯示呼叫可能會在動畫中出現小故障，先將文字顯示為深色，然後轉換為淺色。建議在第一次呼叫時使用Animation.None 作為動畫。

參數類型
optionsAnimationOptions

起始版本 1.0.0

hide(...)​

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

隱藏狀態列。

參數類型
optionsAnimationOptions

起始版本 1.0.0

getInfo()​

getInfo() => Promise<StatusBarInfo>

取得有關狀態列目前狀態的資訊。

傳回： Promise<StatusBarInfo>

起始版本 1.0.0

setOverlaysWebView(...)​

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

設定狀態列是否應覆蓋網頁檢視，以允許使用其下方的空間。

此方法僅在 Android 上支援。

參數類型
optionsSetOverlaysWebViewOptions

起始版本 1.0.0

介面​

StyleOptions​

屬性類型描述起始版本
styleStyle狀態列文字的樣式。1.0.0

BackgroundColorOptions​

屬性類型描述起始版本
colorstring設定狀態列顏色的十六進位顏色。此選項僅在 Android 上支援。1.0.0

AnimationOptions​

屬性類型描述預設起始版本
animationAnimation顯示或隱藏時使用的狀態列動畫類型。此選項僅在 iOS 上支援。Animation.Fade1.0.0

StatusBarInfo​

屬性類型描述起始版本
visibleboolean狀態列是否可見。1.0.0
styleStyle目前的狀態列樣式。1.0.0
colorstring目前的狀態列顏色。此選項僅在 Android 上支援。1.0.0
overlaysboolean狀態列是否覆蓋。此選項僅在 Android 上支援。1.0.0

SetOverlaysWebViewOptions​

屬性類型描述起始版本
overlayboolean是否覆蓋狀態列。1.0.0

列舉​

Style​

成員值描述起始版本
Dark'DARK'深色背景的淺色文字。1.0.0
Light'LIGHT'淺色背景的深色文字。1.0.0
預設'DEFAULT'樣式會根據裝置外觀而定。如果裝置使用深色模式，狀態列文字將會是淺色。如果裝置使用淺色模式，狀態列文字將會是深色。在 Android 上，預設值會是應用程式啟動時的設定。1.0.0

Animation​

成員值描述起始版本
None'NONE'顯示/隱藏期間沒有動畫。1.0.0
Slide'SLIDE'顯示/隱藏期間的滑動動畫。在 iOS 15 以上版本無法運作。1.0.0
Fade'FADE'顯示/隱藏期間的淡入淡出動畫。1.0.0

目錄

編輯此頁面