Flutter修改状态栏状态 2023-08-22 周二

简介

状态栏一直没有管过，反正在最上层，也就亮（白），暗（黑）两种模式。一直没有问题，也很少有人关心

问题

后来，重写了头部，抛弃了AppBar()，用了一个Container()来模拟。并且在暗黑模式下，UI设计给的颜色是暗黑模式下，给的背景色是纯黑。这就导致，“暗黑下时间栏看不到了”

企业微信截图_41c2cc3a-38f0-4181-b987-feb474e8ec36.png

如何修改？

• 既然弃用了AppBar()，那么通过修改属性来改变状态栏样式的方式行不通了。

• 采用全局函数static void setSystemUIOverlayStyle(SystemUiOverlayStyle style)进行修改。

• 和模式应该联系起来：在暗黑模式下，状态栏应该是亮色；在明亮模式下，状态栏应该是暗色；

    if (ThemeTool.isdark()) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
    } else {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    }

• 如果有页面有特殊要求，到时候再设置一遍就好。

修复效果

这种想法效果，对比很强烈，非常清晰

• 明亮模式，状态栏是暗色

企业微信截图_5dbfc76d-8ede-4c48-9d3b-2d63289202dc.png

• 暗黑模式，状态栏是亮色

企业微信截图_1048415f-2982-4fad-8bf6-04cb8dd5f9e9.png

问题

在实际尝试过程中，发现改变状态栏不是每一次都成功，非常郁闷。
后来尝试了延时执行，感觉上能够提高成功率。

class DeviceUtil {
  /// 切换状态栏
  static changeStatusBar() {
    Future.delayed(const Duration(seconds: 1), () {
      if (ThemeTool.isdark()) {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
      } else {
        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
      }
    });
  }
}

参考文章

Flutter 单独页面状态栏颜色改变backgroundColor和statusBarColor