美文网首页
flutter状态栏颜色设置 - 有APP Bar页面push到

flutter状态栏颜色设置 - 有APP Bar页面push到

作者: 李有钱灬 | 来源:发表于2021-08-05 16:35 被阅读0次

设置状态栏颜色的方式有两种(我常用的,其他方式不了解):

1、APPBar:

Scaffold(
  appBar: AppBar(
    brightness: Brightness.light,// 或Brightness.dark
  ),
  body: Container()
)

2、SystemChrome

// 或SystemUiOverlayStyle.dark
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

但有时会有这样的需求:page1 -> page2、page3 -> page2,page1状态栏为黑色,而page2和page3状态栏颜色为白色,这时候我们就得在page2返回时修改状态栏颜色。

具体做法:进入page2时记录上一个页面的状态栏颜色,并将当前状态栏颜色设为白色,退出时再将状态栏颜色设置为之前的颜色。

// 记录上一个页面的状态栏颜色
SystemUiOverlayStyle _lastStyle;
@override
void initState() {
  // 获取状态栏最后
  _lastStyle = SystemChrome.latestStyle;

  // 设置当前状态栏颜色为白色
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  super.initState();
}

@override
void dispose() {
  // 将状态栏颜色设置为之前的颜色
  SystemChrome.setSystemUIOverlayStyle(_lastStyle);
  super.dispose();
}

但是,有个特殊情况,就是上一个页面有导航栏,而page2没有导航栏时,这样设置是无效的。

解决方法:page2使用AnnotatedRegion组件,之前的逻辑保持不变:

@override
Widget build(BuildContext context) {
  return AnnotatedRegion<SystemUiOverlayStyle>(
    // 这里设置导航栏颜色
    value: SystemUiOverlayStyle.light,
    child: Scaffold()
}

参考文章:
FlutterUI开发-改变状态栏颜色

Just do IT!

相关文章

网友评论

      本文标题:flutter状态栏颜色设置 - 有APP Bar页面push到

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