flutter 如何在iOS中更改状态栏颜色?

fhg3lkii  于 2023-05-01  发布在  Flutter
关注(0)|答案(5)|浏览(212)

我想用package:flutter/services.dart软件包改变状态栏的颜色,但它不起作用。我正在使用Mac和iOS模拟器:

  • 莫哈韦10.146
  • iOS 12.2模拟器/ Xr
  • Flutter1.91+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模拟器有关?怎么修?
联合警察
这个问题开始让我抓狂了。

0md85ypi

0md85ypi1#

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

苹果希望你坚持他们的设计,这就是为什么改变statusBarColor对iOS没有影响。

ljsrvy3e

ljsrvy3e2#

试试这个

@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"),
              )
              );
            }
wd2eg0qa

wd2eg0qa3#

试试他们:

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

bbuxkriu4#

所有带有SystemUiOverlayStyle的答案在热重新加载时都不起作用
找到了这个答案:

  • "...将SystemChrome的调用 Package 在未来。“*

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
        )));
6ovsh4lw

6ovsh4lw5#

对于每个人谁不是在AppBar工作风格设置,尝试这个

void main() {
  
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

  runApp(const App());
}

相关问题