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上截的，不是很清晰，不过不影响