這篇我們來試著練習和改變Android的狀態欄讓我們開發的APP更有個性或特色，Ionic提供了一組可以設定原生狀態欄的樣式或是顯示和隱藏功能的API，下圖可以看到預設的Status Bar樣式



安裝Plugins

首先先來安裝Capacitor Status Bar原生套件，安裝完成後需要同步一下專案
npm install @capacitor/status-bar

Android

ionic cap sync android

Ios

ionic cap sync ios


Status Bar設定

首先為了一致性我想要將Status Bar改成白色的背景（和我的Toolbar一樣的顏色），我們打開「app.component.ts」Import一下「StatusBar」和「Style」
import { StatusBar, Style } from '@capacitor/splash-screen';
在constructor注入「Platform」服務並且加入程式碼
constructor(private platform: Platform) { 
  this.platform.ready().then(async () => {
    StatusBar.setBackgroundColor({
      color: '#FFFFFF'
    });
  });
}
💡注意！Ios不支援setBackgroundColor方法
添加完成後Status Bar就成功變成我們要的顏色，但是問題來了！Status Bar上的Icon顏色因為背景色是白色而看不到了！


我們可以透過SetStyle方法來改變狀態文字的深淺，這裡使用的「Light」是當主題是淺色模式時文字就會是深色，Dark則反之
設定完成後重新編譯Icon就可以看的到了！
constructor(private platform: Platform) { 
  this.platform.ready().then(async () => {
    StatusBar.setBackgroundColor({
      color: '#FFFFFF'
    });
    // 改變狀態欄的Style
    StatusBar.setStyle({
      style: Style.Light
    });
  });
}



IOS設定

在Ios上必須要額外注意一個設定，首先來到Xcode找到「App/App/」底下的「Info.plist檔案」在「Information Property List」找到「View controller-based status bar appearance」這個Value必須要為「YES」【點我前往參考】
💡Ionic 6開始建立的Ios專案預設應該都會是「YES」，我記得早期的版本在使用的時候預設值都是「NO」