Flutter:在 iOS 中更改状态栏颜色 [英] Flutter: Change status bar color in iOS

问题描述

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

I want to change status bar color with package:flutter/services.dart package but it doesn't work. I am using Mac and iOS simulator:

• 莫哈韦 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 函数中:

Even if I put it in the main function:

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 背景颜色更改为白色，我会得到这个.

As a result I get this if I want to change appBar background color to white.

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

Haven't tested it for android yet. Is this issue related only to iOS simulator or so? How to fix it?

U.P.D.

这个问题让我抓狂了.

推荐答案

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

输出:

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

statusBarColor can only be changed in Android and not in iOS, and probably Apple can reject your app if you try do so by some workarounds because they don't want you to have different AppBar and status bar color.

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

Apple 希望您坚持他们的设计，这就是更改 statusBarColor 对 iOS 没有影响的原因.

Apple wants you to stick to their designs which is why changing statusBarColor has no effect on iOS.

这篇关于Flutter:在 iOS 中更改状态栏颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！