【问题标题】:How to change the status bar icons and text color to black in flutter?如何在颤动中将状态栏图标和文本颜色更改为黑色?
【发布时间】:2021-10-11 21:03:48
【问题描述】:

我在 Flutter 中为 App Bar 使用白色背景,如何将状态栏图标颜色更改为黑色,

我正在使用此代码更改状态栏颜色,

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.white,
  statusBarIconBrightness: Brightness.light,
));

【问题讨论】:

    标签: android ios flutter dart


    【解决方案1】:

    Flutter 2.4.0+ 更新

    由于颤振 2.4.0 brightness: Brightness.dark 已弃用。

    已替换为systemOverlayStyle: SystemUiOverlayStyle.dark

    使用方法:

    import 'package:flutter/services.dart';

    appBar: AppBar(
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        elevation: 0.0,
    ),
    

    如果你想要黑色图标,请设置SystemUiOverlayStyle.dark

    如果你想要白色图标,请设置SystemUiOverlayStyle.light

    【讨论】:

      【解决方案2】:

      如果您使用的是brightness,您还需要在AppBar 中设置为brightness。例如。

      appBar: AppBar(
              backgroundColor: Colors.white,
              brightness: Brightness.dark,
      ),
      

      您可以在这里查看详细答案:How to change status bar color in Flutter?

      【讨论】:

        【解决方案3】:

        您好,在我的项目中,我使用以下内容(使用 Brightness 已过时)

        没有 AppBar:
        return AnnotatedRegion<SystemUiOverlayStyle>(
                    //Set status bar icon color
                    value: your_condition
                        ? SystemUiOverlayStyle.dark.copyWith(
                            statusBarColor: your_color,
                            //statusBarIconBrightness: Brightness.light,
                          )
                        : SystemUiOverlayStyle.light.copyWith(
                            statusBarColor: your_color,
                            //statusBarIconBrightness: Brightness.light,
                          ),
                    child: your_widget);
        
        使用 AppBar:
        return AppBar(
            elevation: 0.0,
            systemOverlayStyle: your_condition ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light,
            backgroundColor: your_color,
        );
        
        • 您可以结合使用上述两种方法来实现您的目标

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2021-11-27
          • 2017-08-16
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多