美文网首页
Flutter修改状态栏状态 2023-08-22 周二

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

作者: 勇往直前888 | 来源:发表于2023-08-21 15:11 被阅读0次

简介

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

问题

后来,重写了头部,抛弃了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

相关文章

网友评论

      本文标题:Flutter修改状态栏状态 2023-08-22 周二

      本文链接:https://www.haomeiwen.com/subject/ghxymdtx.html