如何在 Ios 上更改状态栏文本颜色

Posted 2023-02-23

【中文标题】如何在 Ios 上更改状态栏文本颜色

【英文标题】：How to change the status bar text color on 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,
      ),
    ],
  ),

【问题讨论】：

看看 SystemChrome 类是否有帮助...您也可以在 X-code 中选择浅色或深色设置。 docs.flutter.io/flutter/services/SystemChrome-class.html

【参考方案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,
      ),
    );