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

Question

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

我试过这个但没有用.

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

输出看起来像这样:

Answer 1

简单地把它放在你的应用程序的构建功能中:

import 'package:flutter/services.dart';

此外,您可以设置有用的变量,如:services,statusBarIconBrightness或systemNavigationBarColor

Answer 2

如果您掠夺了AppBar 的源代码，则可以看到它们使用了AnnotatedRegion小部件。

据我了解，当包装在其中的小部件被状态栏/导航栏覆盖时，此小部件会自动设置状态栏/导航栏颜色。

您可以像这样包装小部件：

import 'package:flutter/services.dart';

...    

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

Answer 3

正如已经提到的解决方案，我正在以不同的方法实施它。遵循的方法是删除AppBar并使用Container小部件更改状态栏的颜色。

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Test',
      home: Scaffold(
        primary: true,
        appBar: EmptyAppBar(),
        body: MyScaffold(),
      ),
    ),
  );
}

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        'Test',
      ),
    );
  }
}

class EmptyAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.black,
    );
  }

  @override
  Size get preferredSize => Size(0.0, 0.0);
}

• 在这里，我使用EmptyAppBar类来删除默认情况下存在于Scaffold 中的AppBar
• 在EmptyAppBar类中，我们可以在容器小部件中选择所需的颜色。
• 之后，您将拥有自己的自定义MyScaffold类来创建您的小部件。在我的代码中，我创建了一个文本。

参考：GitHub 问题

Answer 4

在搜索 SystemChrome 时，我发现了这个：https ://docs.flutter.io/flutter/services/SystemChrome/setSystemUIOverlayStyle.html

示例代码的正上方是一段关于AppBar.brightness.

您应该能够像这样添加一个 AppBar：

Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark);
    return new Scaffold(
        appBar: new AppBar(
            title: new Text('Nice title!'),
            brightness: Brightness.light,
        ),
        body: new Container(
        color: UniQueryColors.colorBackground,
        child: new ListView.builder(
           itemCount: 7,
           itemBuilder: (BuildContext context, int index){
             if (index == 0){
               return addTopInfoSection();
             }
           },
        ),
       ),
    );
}

这里是关于亮度的信息

Answer 5

你应该通过两种方式解决这个问题：

1. 你没有设置 appBar 那么你就这样写：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle.dark.copyWith(
  statusBarColor: Colors.black, 
));

或者

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

2. 你总是设置 appBar 所以你应该设置 appBar 但不是在代码上：

Scaffold(
  appBar: AppBar(
    brightness: Brightness.light,
  )
)

或者

Scaffold(
  appBar: AppBar(
    brightness: Brightness.dark,
  )
)

Answer 6

在Android上，在对super.onCreate（savedInstanceState）的调用之后，将以下内容添加到MainActivity.java中的 onCreate ：

getWindow（）。setStatusBarColor（0x00000000）;

或者您可以使用flutter_statusbarcolor插件

   changeStatusColor(Color color) async {
    try {
      await FlutterStatusbarcolor.setStatusBarColor(color);
    } on PlatformException catch (e) {
      print(e);
    }
  }

样例项目

Answer 7

使用

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

或者

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

Answer 8

我尝试了很多方法，但它们没有\xe2\x80\x99 工作。我找到了另一种方法，使用 safeArea ，AnnotatedRegion 和 Scaffold

\n\n

AnnotatedRegion(\n  // status icon and text color, dark:black  light:white\n  value: SystemUiOverlayStyle.dark,\n  child: Scaffold(\n     // statusbar color\n     backgroundColor: Colors.white,\n     body : SafeArea(****)\n  )\n}\n

\n\n

代码实现白色状态栏和黑色文本

\n