【问题标题】:How to change the status bar text color on Ios如何在 Ios 上更改状态栏文本颜色
【发布时间】:2019-01-13 12:12:48
【问题描述】:

我对所有这些颤抖的东西都不熟悉。我到处寻找解决这个小问题的方法。 有没有办法改变状态栏的颜色? 此外,当我使用 color.blue 之类的颜色时,我可以看到状态栏中的文本质量不好。

谢谢

appBar: AppBar(
    elevation : 0.0,
    leading: IconButton(
      icon: Icon(Icons.menu),
      tooltip: 'Navigation menu',
      onPressed: null,
    ),
    actions: <Widget>[
      IconButton(
        icon: Icon(Icons.search),
        tooltip: 'Search',
        onPressed: null,
      ),
    ],
  ),

【问题讨论】:

标签: flutter


【解决方案1】:

我们可以让状态栏变暗:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);

或光:

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light);

【讨论】:

    【解决方案2】:

    Android 也有答案。

    如果您需要在状态栏中显示黑色文本,请调用它:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
       statusBarColor: Colors.transparent, // optional
    ));
    

    如果您需要状态栏中的白色文本,请调用它:

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.light.copyWith(
       statusBarColor: Colors.transparent, // optional
    ));
    

    因为 statusBarBrightness 参数只适用于 iOS

    【讨论】:

      【解决方案3】:

      @Antoine 基本上你可以设置你的主题亮度,或者你可以使用以下手动覆盖应用栏亮度:

      appBar: new AppBar(
        title: new Text(widget.title),
        brightness: Brightness.light, // or use Brightness.dark
      ),
      

      请注意,这只会在白色和黑色状态文本颜色之间切换。

      .dark 将使状态栏文本WHITE,而.light 将使状态栏文本BLACK

      也许是为了更自定义的颜色,就像评论说你可以查看 SystemChrome 类。

      【讨论】:

      • 需要注意的是,.dark 将使状态栏文本变为白色,而.light 将使状态栏文本变为黑色。起初这让我很困惑
      • @vikzilla 这应该包含在答案中。
      • 它对我没有任何作用
      • 应该使用 ThemeData: ThemeData(appBarTheme: AppBarTheme(brightness: Brightness.light),)
      • AppBar的flutter 2.5亮度属性被弃用后。
      【解决方案4】:

      我在为不同的屏幕设置不同的状态栏颜色时遇到了问题。我正在使用 slivers,亮度(影响状态栏颜色)可以在 SliverAppBars 中设置与在普通 AppBars 中相同的方式。

      SliverAppBar(
        brightness: Brightness.light, //or Brightness.dark
        //...
      );
      

      SliverAppBar 的亮度,如果为 null,则默认为 AppBarTheme.brightness、ThemeData.appBarTheme 或 ThemeData.primaryColorBrightness,如果其中任何一个为 null。

      AppBarTheme.brightness 设置示例:

      MaterialApp(
        //...
        theme: ThemeData(
          appBarTheme: AppBarTheme(brightness: Brightness.dark),
        ),
        //...
      );
      

      【讨论】:

      • 我正在为不同屏幕上不同的状态栏文本颜色而苦苦挣扎,你能解释一下你是如何让它工作的吗?我将主页设置为黑色文本,第二个屏幕设置为白色文本,这样就可以了。但不幸的是,回家保留了白色文字。
      【解决方案5】:

      不要使用AnnotatedRegion

      应用程序不应使用自己的 [AnnotatedRegion] 包围 AppBar。

      你应该使用:

      AppBar(
        backwardsCompatibility: false,
        systemOverlayStyle: SystemUiOverlayStyle(statusBarColor: Colors.orange),
      )
      

      【讨论】:

      • 这是2021年的正确答案。谢谢。 SystemUiOverlayStyle.light 使状态栏文本和图标变为白色,SystemUiOverlayStyle.dark 使它们变为黑色。
      【解决方案6】:

      AnnotatedRegion 帮助您更改 iOS 上的状态栏文本颜色。

      import 'package:flutter/services.dart';
      ...    
      
      Widget build(BuildContext context) {
         return AnnotatedRegion<SystemUiOverlayStyle>(
               value: SystemUiOverlayStyle.dark,                
               child: ...,
         );
      }
      

      但如果您在 Scaffold 中有 AppBar,那么只有 AnnotatedRegion 将不起作用。这是解决方案。

        Widget build(BuildContext context) {
          return AnnotatedRegion<SystemUiOverlayStyle>(
            value: SystemUiOverlayStyle.dark, // play with this
            child: Scaffold(
              appBar: AppBar(
                brightness: Brightness.light, // play with this
              ),
              body: Container(),
           );
        }
      

      【讨论】:

        【解决方案7】:

        对于 IOS 和 Android:

        SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
           statusBarColor: Colors.white, // Color for Android
           statusBarBrightness: Brightness.dark // Dark == white status bar -- for IOS.
        ));
        

        【讨论】:

        • 在哪里写?
        • @PratikButani 在“构建”函数中。或者您可以使用名为“AnnotatedRegion”的小部件
        • @PratikButani 在 main 函数中,'runApp' 所在的位置。
        【解决方案8】:

        当我不使用 AppBar 时,可以使用AnnotatedRegion 更改颜色。

        import 'package:flutter/services.dart';
        
        ...    
        
        Widget build(BuildContext context) {
           return Scaffold(
              body: AnnotatedRegion<SystemUiOverlayStyle>(
                 value: SystemUiOverlayStyle.light,                
                 child: ...,
              ),
           );
        }
        

        【讨论】:

        • 您的答案是唯一真正适用于我有动画 SliverPersistenheader 的答案。
        【解决方案9】:

        @Antoine 这个问题让我很头疼。我使用 statusbarColor 插件https://pub.dartlang.org/packages/flutter_statusbarcolor 将状态栏颜色更改为黑色。然后我将应用栏的亮度设置为暗,因为它是深色背景。

        import 'package:flutter/material.dart';
        import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';
        import 'package:flutter/services.dart';
        
        void main() async{
        
          try {
            await FlutterStatusbarcolor.setStatusBarColor(Colors.black);
          }  catch (e) {
            print(e);
          }
        
        
          runApp(MaterialApp(
            title: 'Using Keys',
            debugShowCheckedModeBanner: false,
            theme: ThemeData(
              primaryColor: Colors.white
        
            ),
            home: InputBox(),
          ));
        }
        
        class InputBox extends StatefulWidget {
          @override
          _InputBoxState createState() => _InputBoxState();
        }
        
        class _InputBoxState extends State<InputBox> {
          bool loggedIn = false;
          String _email, _username, _password;
        
          final scaffoldKey = GlobalKey<ScaffoldState>();     //a key for the state of the scaffold
          final formKey = GlobalKey<FormState>();             //a key for the state of the form
        
          @override
          Widget build(BuildContext context) {
            return Scaffold(
              key: scaffoldKey,
              appBar: AppBar(
                //backgroundColor: Colors.white,
                centerTitle: false,
                brightness: Brightness.dark,
                title: Text("Using Keys",
                    style: TextStyle(
                      fontSize: 24.0,
                    )),
                elevation: 4.0,
              ),
            );
          }
        }
        

        【讨论】:

          猜你喜欢
          • 2013-07-14
          • 2013-10-04
          • 2019-11-01
          • 2019-10-27
          • 2021-08-03
          • 2019-03-10
          • 2020-03-25
          • 1970-01-01
          相关资源
          最近更新 更多