flutter 状态栏颜色显示问题

在android 中全局修改状态栏颜色比较常用的方法,如下是设置黑底白字的状态栏设置方式

runApp(MyApp());
if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:Colors.black,statusBarIconBrightness: Brightness.light);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }

预期效果如下

然而在部分页面中却存在这种颜色与文字颜色相同的情况

几番测试才发现是appBar 的background 属性会影响状态栏的字体颜色,由于我在全局的AppBarTheme设置中background设为了白色,所以在白色appBar页面中状态栏的字体颜色会自动修改。

经测试发现在AppBarTheme中同样添加sysTemOVerLayStyle属性可以固定颜色

 appBarTheme: AppBarTheme(
          ...
         backgroundColor:Colors.white,
          ...
         systemOverlayStyle: SystemUiOverlayStyle(statusBarColor:Colors.black,statusBarIconBrightness: Brightness.light),
       ),
同理也可在具体页面的AppBar中设置该属性,原理暂不明确
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Flutter中,可以通过使用SystemChrome类和SystemUiOverlay枚举来隐藏状态栏。首先,我们可以使用`SystemChrome.setEnabledSystemUIOverlays([])`来隐藏状态栏和底部按钮栏。例如,以下代码可以实现隐藏状态栏和底部按钮栏: ```dart import 'package:flutter/services.dart'; SystemChrome.setEnabledSystemUIOverlays([]); ``` 如果你只想隐藏状态栏而保留底部按钮栏,可以使用`SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])`。例如,以下代码隐藏状态栏但保留底部按钮栏: ```dart import 'package:flutter/services.dart'; SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); ``` 如果你想显示状态栏和底部按钮栏,可以使用`SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)`。例如,以下代码显示状态栏和底部按钮栏: ```dart import 'package:flutter/services.dart'; SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values); ``` 在隐藏状态栏的同时,你还可以使用`SystemChrome.setSystemUIOverlayStyle`来设置状态栏的样式。例如,你可以设置状态栏为透明: ```dart import 'package:flutter/services.dart'; import 'package:flutter/material.dart'; SystemChrome.setSystemUIOverlayStyle( SystemUiOverlayStyle( statusBarColor: Colors.transparent, ), ); ``` 请注意,上述代码只适用于Flutter应用程序中隐藏和显示状态栏的方法。如果你想在Android上隐藏状态栏,你可以使用`SystemChrome.setSystemUIOverlayStyle`来设置`statusBarColor`为透明。例如,以下代码可以在Android上隐藏状态栏: ```dart import 'dart:io'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; if (Platform.isAndroid) { SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle( statusBarColor: Colors.transparent, statusBarIconBrightness: Brightness.dark, ); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); } ``` 希望这些代码对你有帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [flutter 隐藏状态栏和底部按钮](https://blog.csdn.net/NotesChapter/article/details/110406540)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [flutter-status-alert:显示类似Apple系统的自动隐藏状态警报。 非常适合在不中断用户流程的情况下通知用户](https://download.csdn.net/download/weixin_42162216/15048923)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郭_栋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值