一、问题
下图中实际状态栏并没有隐藏。 为了整体效果页面采用了上下渐变拼接色,并且没有加appBar。
这时候会出现状态栏图标并没有根据底色 进行反差显示。
就目前这个问题,并没有找到什么很好的办法。其原因 就是appBar 没有设置底色。
二、解决方法
1.Scaffold 加入appBar 设置需要的底色 使其完全透明
2. Scaffold 增加 extendBodyBehindAppBar: true 属性, 使appBar 不独自占位,而是浮在 body之上。
代码:
Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: Colors.grey,
appBar: AppBar(
backgroundColor: Colors.grey.withOpacity(0),
),
body: Container(
color: Colors.green
),
);
如此一来状态栏就会识别 AppBar 的backgroundColor 颜色, 即便它是透明的也会根据原色 进行反差。
**手动设置状态栏颜色**
其实还可以手动设置状态栏颜色, 但这样感觉有很多不便,既然系统可以自动识别 还是不要费时费力的比较好。(最主要原因, 这样还要配合主题切换, 系统明暗切换 比较麻烦)
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.dark, // 手动配置状态栏颜色
systemNavigationBarColor: Colors.transparent, // 根据主题设置底栏颜色
statusBarColor: Colors.transparent, // 如果想要状态栏透明,可以设置为透明色
),
);
我没搜索到什么解决方法,不知道有没有更好的方案 ,毕竟在不使用 appBar 页面的场景还是有很多的。 目前只找到这种解决方法。
如果有更好的方法望告知!