Flutter：在 iOS 中更改状态栏颜色

Posted 2023-02-23

【中文标题】Flutter：在 iOS 中更改状态栏颜色

【英文标题】：Flutter: Change status bar color in iOS

【发布时间】：2020-02-04 19:38:41

【问题描述】：

我想用package:flutter/services.dart 包更改状态栏颜色，但它不起作用。我正在使用 Mac 和 ios 模拟器：

莫哈韦 10.14.6 iOS 12.2 模拟器/Xr Flutter 1.9.1+hotfix.2 工具• Dart 2.5.0

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 

    SystemChrome.setSystemUIOverlayStyle(
      SystemUiOverlayStyle(
        statusBarColor: Colors.red // <-- doesn't work
      )
    );

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

... // other stuff

即使我把它放在main 函数中：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() 
  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle(
      statusBarColor: Colors.red,
    )
  );
  SystemChrome.setPreferredOrientations(
      [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
    .then((_) => runApp(MyApp()));

... // the rest code here

因此，如果我想将 appBar 背景颜色更改为白色，我会得到这个。

尚未针对 android 测试它。这个问题仅与iOS模拟器有关吗？如何解决？

U.P.D.

这个问题让我抓狂了。

【参考方案1】：

编辑：

appBar: AppBar(
  elevation: 0,
  brightness: Brightness.light, // this makes status bar text color black
  backgroundColor: Colors.white,
)

输出：

---

statusBarColor 只能在 Android 中更改，而不能在 iOS 中更改，如果您尝试通过一些变通方法这样做，Apple 可能会拒绝您的应用程序，因为他们不希望您有不同的AppBar 和状态栏颜色。

AppBar(backgroundColor: Colors.red) // this changes both AppBar and status bar color in iOS

Apple 希望您坚持他们的设计，这就是为什么更改 statusBarColor 对 iOS 没有影响。

【讨论】：

遗憾的是没有任何改变。

谢谢。我复制了你的代码，但它没有改变，对不起。

我自己没试过，让我看看。

好的，我发现它在 Android 上运行良好，但在 iOS 上却不行。

这是一个遗憾的消息 :( 有人在这个问题上加上了减号，可能是一个愤怒的颤振团队开发人员大声笑

【参考方案2】：

试试这个

@override
Widget build(BuildContext context) 
return Scaffold(
appBar: AppBar(
      backwardsCompatibility: false, "if set to false it doesn't use default app bar theme"
      systemOverlayStyle: SystemUiOverlayStyle(statusBarColor:Colors.orange,"It change the color of status bar"
      statusBarIconBrightness:  Brightness.light "It change the color of status bar icons"),
              )
              );
            

【参考方案3】：

试试看：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.white, // this one for android
  statusBarBrightness: Brightness.light// this one for iOS
));

【讨论】：

对不起，它也不起作用。其实我需要改变颜色。我很惊讶用 Flutter 解决移动开发人员如此简单的主要任务如此困难。

【参考方案4】：

SystemUiOverlayStyle 的所有答案在热重载中都不起作用

找到这个答案：

"...将 SystemChrome 的调用包装在 Future 中。"

https://github.com/flutter/flutter/issues/65632#issuecomment-714535817

只有设置 statusBarBrightness 似乎在本地 iOS 运行时有效：

Future.delayed(Duration(milliseconds: 1)).then(
    (value) => SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
          statusBarBrightness: Brightness.dark, // bar light == text dark
        )));