Flutter - 在AppBar不存在时如何设置状态栏颜色

Question

38 浏览2023年5月15日

匿名的 2023年5月16日

0 Comments

如何在没有AppBar的情况下设置状态栏颜色。\n我尝试过这个方法，但是没有起作用。\nWidget build(BuildContext context) {\n SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);\n return new Scaffold(\n body: new Container(\n color: UniQueryColors.colorBackground,\n child: new ListView.builder(\n itemCount: 7,\n itemBuilder: (BuildContext context, int index){\n if (index == 0){\n return addTopInfoSection();\n }\n },\n ),\n ),\n );\n}\n\n输出效果如下：\n $\"enter$

0

3 答案

匿名的 · Answer 1 · 2023-07-18T05:41:38+00:00

问题的原因是在Flutter中，当AppBar不可见时，无法直接设置状态栏的颜色。解决方法是通过移除AppBar并使用Container小部件来改变状态栏的颜色。

具体的实现方法如下所示：

首先，在main函数中创建一个MaterialApp，将debugShowCheckedModeBanner属性设置为false，然后在Scaffold的appBar属性中使用EmptyAppBar小部件，将body属性设置为MyScaffold小部件。

接下来，创建一个MyScaffold小部件，将其build方法中返回一个Container小部件，其中包含一个Text小部件。

然后，创建一个EmptyAppBar小部件，它继承自StatelessWidget，并实现PreferredSizeWidget接口。在build方法中，返回一个颜色为黑色的Container小部件。同时，通过preferredSize属性将AppBar的大小设置为0.0。

最后，将以上代码粘贴到Flutter项目中，并根据需要修改EmptyAppBar小部件中的颜色。

这种方法可以解决在具有和不具有AppBar的屏幕之间切换时，无法设置状态栏颜色的问题。与使用SystemUiOverlayStyle的方法不同的是，这种方法不会覆盖AppBar的设置，也不会在离开屏幕时重置状态栏的颜色。

参考文献：GitHub Issue（https://github.com/flutter/flutter/issues/4518#issuecomment-424298638）

许多人认为这是解决此问题的最佳方法，因为它适用于具有和不具有AppBar的应用程序。这个答案解救了我一天，非常感谢！

匿名的 · Answer 2 · 2023-09-15T05:10:59+00:00

问题的原因是：在Flutter中，当没有使用AppBar时，无法直接设置状态栏的颜色。

解决方法是使用AnnotatedRegion组件来控制系统覆盖样式。AnnotatedRegion组件可以在被包裹的组件被状态栏/导航栏覆盖时自动设置状态栏/导航栏的颜色。

代码示例：

import 'package:flutter/services.dart';


...
Widget build(BuildContext context) {
   return Scaffold(
      body: AnnotatedRegion(
         value: SystemUiOverlayStyle.light,                
         child: ...,
      ),
   );
}

通过使用AnnotatedRegion组件，并设置value属性为SystemUiOverlayStyle.light，可以实现设置状态栏的颜色。

如果需要根据应用的主题（Dark/Light）来动态设置状态栏的颜色，可以使用以下代码：

value: (Theme.of(context).brightness == Brightness.dark)


   ? SystemUiOverlayStyle.light
   : SystemUiOverlayStyle.dark

如果需要更改状态栏的颜色，可以使用以下代码：

value: SystemUiOverlayStyle.light.copyWith(


   statusBarColor: Theme.of(context).primaryColor,
)

需要注意的是，使用AnnotatedRegion组件可能会导致应用性能下降。

更多关于AnnotatedRegion组件的信息，请参考API文档。

通过使用AnnotatedRegion组件，可以在没有使用AppBar时，设置状态栏的颜色。通过设置value属性，并结合SystemUiOverlayStyle类的不同属性，可以实现不同的样式效果。但需要注意使用AnnotatedRegion组件可能会导致应用性能下降。

匿名的 · Answer 3 · 2023-08-20T01:15:44+00:00

问题的出现原因：在Flutter中，当没有AppBar存在时，想要设置状态栏的颜色可能会遇到问题。

解决方法：可以通过导入`services`包，并在App的`build`函数中使用`SystemChrome.setSystemUIOverlayStyle`来设置状态栏的颜色。此外，还可以设置其他有用的属性，如`statusBarIconBrightness`、`systemNavigationBarColor`或`systemNavigationBarDividerColor`。

另外，也可以考虑使用`AnnotatedRegion`小部件以更符合Flutter风格的方式实现相同的效果。`value`属性可以设置为包含与上述相同属性的`SystemUiOverlayStyle`对象。

需要注意的是，这种方法可能在导航方面存在问题，或者在某些情况下似乎根本不起作用。某些情况下这只适用于Android而不适用于iOS。另外，需要注意`statusBarColor`只在Android版本M及以上版本中有效，对于iOS没有效果。

总结起来，使用`AnnotatedRegion`的解决方案更好，因为它可以自动管理。