设置状态栏颜色的方式有两种(我常用的,其他方式不了解):
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开发-改变状态栏颜色
网友评论