Flutter沉浸式狀態欄

Flutter是一款用於快速開發高質量原生用戶界面的移動框架。它提供一個現代的可編程方式，使得開發人員能夠構建跨iOS和Android等平台的漂亮應用程序。Flutter的沉浸式狀態欄功能為開發者提供了一種簡單的方法來處理狀態欄的顏色、透明度和顯示模式等問題，本篇文章將從多個方面對Flutter沉浸式狀態欄做詳細的闡述。

一、顏色和透明度

Flutter SDK提供了一個StatefulWidget——Scaffold，可以控制AppBar、底部導航欄和背景顏色等。AppBar是Material Design下的一個頂部應用欄組件，通常包含了程序的Logo、標題、菜單和返回按鈕等。設置AppBar的背景色、透明度可以達到狀態欄顏色和透明度一致的效果。

Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.blue.withOpacity(0.5),
  ),
  body: ......
)

在上面的代碼示例中，通過設置背景色為藍色，並且具有50%的透明度，這樣狀態欄的顏色和透明度也就跟AppBar保持一致了。需要注意的是，由於這種方式只是將顏色透明度設置為相同，所以在狀態欄中還是可以看到它的內容的。

二、顯示模式

Flutter提供了三種狀態欄顯示模式——默認模式、淺色和深色。默認模式下，狀態欄會根據背景顏色自動選擇合適的文字顏色。深色模式下，文本為白色，適合淺色背景。淺色模式下，文本為黑色，適合深色背景。

默認情況下，Flutter會默認使用明亮模式，即在背景為白色時自動使用深色文本，背景為深色時使用淺色文本。但是，在一些場景下可能需要強制使用深色或淺色模式，可以通過設置SystemUiOverlayStyle來實現。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
  statusBarBrightness: Brightness.dark,
));

上述代碼展示了如何強制使用深色模式。首先需要通過設置statusBarColor為transparent使得狀態欄背景為透明，然後設置statusBarBrightness為Brightness.dark。

三、沉浸式狀態欄

沉浸式狀態欄是指狀態欄和應用程序之間沒有間隔，因此，應用程序的頂部內容現在可以延伸到狀態欄中。Flutter中可以通過設置Scaffold的extendBody屬性來實現沉浸式狀態欄。

Scaffold(
    extendBody: true,
    body: SafeArea(......),
    ......
)

在上面的代碼示例中，extendBody設置為true表示Scaffold的body將繪製在狀態欄下，從而實現沉浸式狀態欄的效果。為了避免內容與狀態欄重疊，需要在子組件中使用SafeArea來給內容添加一個內邊距。

四、全屏狀態欄

在一些場景下，可能需要隱藏狀態欄來實現全屏顯示的效果。Flutter中可以通過設置SystemChrome.setEnabledSystemUIOverlays([])來實現。這種方式會將狀態欄和底部導航欄都隱藏，需要用戶上下滑動來顯示。

SystemChrome.setEnabledSystemUIOverlays([]);

在上述代碼示例中，setEnabledSystemUIOverlays([])可以讓系統UI全部隱藏，從而實現全屏狀態欄的效果。

五、自定義狀態欄

除了可以通過上述方式來控制狀態欄的顏色、透明度、顯示模式和狀態等，還可以通過自定義方式來實現更加個性化的狀態欄。Flutter提供了一些Widget組件來操作狀態欄，如AnnotatedRegion、StatusBar和SystemChrome等。

Scaffold(
    appBar: AppBar(
      title: Text('自定義狀態欄'),
    ),
    body: AnnotatedRegion(
      value: SystemUiOverlayStyle.light,
      child: ......
    ),
    ......
)

在上面的代碼示例中，使用AnnotatedRegion來設置狀態欄顯示模式，通過value傳入一個SystemUiOverlayStyle對象，指定文本顏色為淺色。

總結

Flutter提供了多種方式來控制狀態欄。通過設置Scaffold的AppBar顏色和透明度、狀態欄的顯示模式、沉浸式狀態欄、全屏狀態欄、自定義狀態欄等，可以達到不同的效果。

代碼示例：https://gist.github.com/YijunLiu/7b8396442e3ecac8cbabffbd6e5d2f2b