Flutter-如何在深色模式下更改状态栏文字颜色？

Posted 2023-04-18

【中文标题】Flutter-如何在深色模式下更改状态栏文字颜色？

【英文标题】：Flutter-How to change the Statusbar text color in Dark Mode?

【发布时间】：2020-02-08 01:19:03

【问题描述】：

我希望在 ios 13 深色模式下控制状态栏文本颜色。当不打开暗模式时，我可以通过设置脚手架的 AppBar 属性“亮度”来更改状态栏颜色。 代码如下：

return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,  //<--Here!!!
        title: Text(widget.title),
      ),
...

这样的努力：

灯光亮度：

暗亮度：

但是当我启用模拟器的黑暗模式时，该方法不起作用。 打开模拟器的“Dark Appearance”：

打开“深色外观”后，状态栏文字颜色无法再通过该方法改变，它只是白色（亮度模式）。

我已经尝试过这些方法来更改状态栏文本颜色：

方法一：

void main() 
  SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);
  SystemChrome.setPreferredOrientations([
    DeviceOrientation.portraitUp,
    DeviceOrientation.portraitDown
  ]);
  runApp(MyApp());

方法二：

return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle.light,
      child: Material(
        child: Scaffold(
          appBar: AppBar(
            brightness: Brightness.light,
            title: Text(widget.title),
          ),
          body: Center(

但是它们都不能工作。

希望您的帮助！谢谢。

【参考方案1】：

首先进入 ios/Runner 文件夹。接下来打开 info.plist 并将以下行添加到 Dict 部分。

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

接下来。确保您在 MaterialApp 的主题设置中有这些行：

...
MaterialApp(
    themeMode: ThemeMode.light, // Change it as you want
    theme: ThemeData(
        primaryColor: Colors.white,
        primaryColorBrightness: Brightness.light,
        brightness: Brightness.light,
        primaryColorDark: Colors.black,
        canvasColor: Colors.white,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.light)),
    darkTheme: ThemeData(
        primaryColor: Colors.black,
        primaryColorBrightness: Brightness.dark,
        primaryColorLight: Colors.black,
        brightness: Brightness.dark,
        primaryColorDark: Colors.black,      
        indicatorColor: Colors.white,
        canvasColor: Colors.black,
        // next line is important!
        appBarTheme: AppBarTheme(brightness: Brightness.dark)),
...

祝你好运！

附： 您不必在这里设置亮度！！没有了:)

Scaffold(
    appBar: AppBar(
    brightness: Brightness.light,  //<--Here!!!
    title: Text(widget.title),
),

【参考方案2】：

我发现我的问题和flutter一样Issue#41067 ---“Flutter 不会在运行 iOS 13.0 且处于深色模式的设备上自动将状态栏图标更改为黑色，只有在 iOS 13 上的深色模式关闭时才会这样做 #41067”

并且Issue状态是Opening，所以希望尽快解决。 问题链接就在下面： flutter issue#41067

【参考方案3】：

在Info.plist中的ios/Runner下添加

<key>UIUserInterfaceStyle</key>
<string>Light</string>
<key>UIViewControllerBasedStatusBarAppearance</key>
<true/>

它对我有用。

【参考方案4】：

如果您的应用是 materialApp，您可以设置 MaterialApp 的 darkTheme 属性：

return new MaterialApp(
  darkTheme: ThemeData.dark(),
);

这里是文档的链接：https://api.flutter.dev/flutter/material/MaterialApp-class.html

如果它不能解决您的问题，您可以使用以下方法创建自己的深色主题：

return new MaterialApp(
  darkTheme: ThemeData(
    // Your theme config
  ),
);

链接到 ThemeData 文档：https://api.flutter.dev/flutter/material/ThemeData-class.html

【讨论】：

首先，感谢您的回复。我试过你的方法，设置“darkTheme”，但无论我设置darkTheme: ThemeData.light() //(I need the black statusbar text color)还是设置darkTheme: ThemeData( //brightness: Brightness.light, primaryColorBrightness: Brightness.light, //textTheme: Typography().black, primaryTextTheme: Typography().black, ),，我都可以更改Appbar背景颜色、Appbar文本颜色以及所有应用颜色和亮度，但是状态栏文本颜色。那我还能尝试什么。

可能考虑到用户体验，禁止在深色模式下更改状态栏文字颜色。但我认为这没有意义。感到有些无奈。

你好。你找到解决办法了吗？

【参考方案5】：

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

这对我有用。如果你想要黑色文本使用：

@override
  Widget build(BuildContext context) 
    FlutterStatusbarcolor.setStatusBarWhiteForeground(false);
    return MaterialApp();
   

对于白色文本使用：

@override
  Widget build(BuildContext context) 
    FlutterStatusbarcolor.setStatusBarWhiteForeground(true);
    return MaterialApp();
   

【参考方案6】：

更改状态栏文本颜色/图标亮度。flutter 2.2.3

MaterialApp( 标题：“颤振演示”， 主题：主题数据（ appBarTheme: Theme.of(context).appBarTheme.copyWith( 亮度：Brightness.dark， systemOverlayStyle: SystemUiOverlayStyle( statusBarIconBrightness: Brightness.light, ), ), primarySwatch：颜色.蓝色， ), home: MyHomePage(title: 'Flutter Demo Home Page'), );

【参考方案7】：

就我而言，我希望在我的浅色主题应用的状态栏中使用深色字体。问题是我的应用栏的背景颜色是透明的，所以状态栏的默认字体颜色是白色（我尝试将应用栏的颜色设置为白色，然后瞧——状态栏的文本字体是黑色的）。 由于我想保持透明状态栏，我的解决方案是像这样将 systemOverlayStyle 添加到我的主题的 appBarTheme 中。：

 AppBarTheme(
        systemOverlayStyle: SystemUiOverlayStyle(
          statusBarBrightness: Brightness.light,
        ),

app_bar_theme.dart 文件在亮度的弃用说明中告诉我这个解决方案：

@已弃用（ '此属性不再使用，请改用systemOverlayStyle。 ' '此功能在 v2.4.0-0.0.pre 之后已弃用。', ) this.brightness,