flutter 当Scaffold 不使用appBar 时,切换主题,状态栏图标 明暗色 不自动变化,导致与底色相同

一、问题

下图中实际状态栏并没有隐藏。 为了整体效果页面采用了上下渐变拼接色,并且没有加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 页面的场景还是有很多的。 目前只找到这种解决方法。

如果有更好的方法望告知!

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值