Flutter 安卓狀態列那點事兒

沉浸式狀態列

在main.dart里加入如下程式碼便可實現

    runApp(MyApp());
  if (DifUtil.isAndroid()) {
    // 以下兩行 設定android狀態列為透明的沉浸。
    // 寫在元件渲染之後，是為了在渲染後進行set賦值,覆蓋狀態列，寫在渲染之前MaterialApp元件會覆蓋掉這個值。
    SystemUiOverlayStyle systemUiOverlayStyle =
        SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
複製程式碼

問題1：假如登入介面背景色是白色，而狀態列是透明的，這個時候就看不到狀態列(如下圖)，那麼在沉浸式狀態下，想要修改狀態列文字顏色怎麼辦？

• 使用AnnotatedRegion元件包裹Scaffold，支援dark和light兩種顏色（如下圖）

  return AnnotatedRegion<SystemUiOverlayStyle>(
    // 設定沉浸式狀態列文字顏色
    value:  SystemUiOverlayStyle.dark,
    child: Scaffold(
          ...
        )
  );
  複製程式碼

問題2：如果按照上面的方式去設定文字顏色，無論設定dark還是light，底部導航欄的顏色始終為黑色

• 如果要設定底部導航欄以及導航欄文字的顏色，那我們就需要自定義SystemUiOverlayStyle

/// 設定沉浸式導航欄文字顏色
  /// 
  /// [light] 狀態列文字是否為白色
  static SystemUiOverlayStyle setNavigationBarTextColor(bool light) {
    return SystemUiOverlayStyle(
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: null,
      statusBarColor: null,
      systemNavigationBarIconBrightness: Brightness.dark,
      statusBarIconBrightness: light ? Brightness.light : Brightness.dark,
      statusBarBrightness: light ? Brightness.dark : Brightness.light,
    );
  }
複製程式碼

return AnnotatedRegion<SystemUiOverlayStyle>(
      // 設定沉浸式狀態列文字顏色
      value:  CommonUtil.setNavigationBarTextColor(false),
      child: Scaffold
複製程式碼

結果如下圖所示

• 狀態列文字為dark模式時

• 狀態列文字為light模式時

總結

• 通過SystemChrome.setSystemUIOverlayStyle 設定沉浸式狀態列

• 通過AnnotatedRegion設定當前介面的狀態列及底部導航欄的樣式

• 通過自定義SystemUiOverlayStyle設定自己想要的樣式

• 文章裡圖片是在vysor上截的，不是很清晰，不過不影響