如何在 Flutter 中隐藏 Android 状态栏答案

【问题标题】：How to hide Android StatusBar in Flutter如何在 Flutter 中隐藏 Android 状态栏
【发布时间】：2017-10-08 04:56:17
【问题描述】：

如何在 Flutter 应用中隐藏 Android 状态栏？

【问题讨论】：

嘿 pieter，如何使它变得稳固并在其下方启动我的应用程序屏幕？
使用 SafeArea Widget 代码示例包装您的正文内容：body: SafeArea(child: MyAppBody()),
目前没有一个答案是永久的。您可以第一次隐藏栏下次打开应用时，它将返回默认的 android 状态。

标签： flutter

【解决方案1】：

SystemChrome.setEnabledSystemUIOverlays([]) 应该做你想做的事。

你可以用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)把它带回来。

使用导入它

import 'package:flutter/services.dart';

更新答案（来自 Flutter 2.5 或最新版本）：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.leanBack);

或者您可以使用其他选项，例如：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
  SystemUiOverlay.bottom
]);  // to hide only bottom bar

然后当你需要重新显示它时（比如在 dispose 时）使用这个：

  @override
  void dispose() {
    super.dispose();

    SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: SystemUiOverlay.values);  // to re-show bars

  }

【讨论】：

这是否也应该删除Android底部按钮栏？（确实如此）。如果有办法只删除状态栏，那么正确的方法是什么？
@Deborah 我猜是这样的：SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
有没有办法禁用这种灰色调？
@GunterZochbauer 在Android上打开键盘时再次出现状态栏
关闭应用，再打开，状态栏又出现了！它并不能永久解决问题！

【解决方案2】：

import 'package:flutter/services.dart';

1.隐藏状态栏

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])

2. 透明状态栏

 SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
 ));

3.显示状态栏

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

你需要把这段代码放在：

1.单屏

@override
  void initState() {
    // put it here
    super.initState();
  }

2.对于main.dart中的所有页面：

 void main() {
      // put it here
      runApp(...);
  }

【讨论】：

我们应该在哪里写它
@Sanjayrajsinh 当我只为第一个屏幕实现此功能时，第二个屏幕在从第一个屏幕导航到第二个屏幕时闪烁。
void main() { WidgetsFlutterBinding.ensureInitialized(); //你可能需要这一行 SystemChrome.setEnabledSystemUIOverlays([]);运行应用程序（....）； }

【解决方案3】：

您可以使用SystemChrome.setEnabledSystemUIOverlays([]) 隐藏并使用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values) 再次将其恢复。

但是，会有轻微的灰色区域，目前还没有解决此问题。隐藏状态栏时，应用栏的高度保持不变。

查看 github 问题：https://github.com/flutter/flutter/issues/14432

【讨论】：

CollinJackson 提到了同样的事情，你只是添加了灰色区域的东西，所以这不是答案，它更适合评论。

【解决方案4】：

对于单页（在页面文件中）：

@override
  void initState() {
    SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
    super.initState();
  }

  @override
  void dispose() {
    SystemChrome.setEnabledSystemUIOverlays(
        [SystemUiOverlay.top, SystemUiOverlay.bottom]);
    super.dispose();
  }

对于所有页面（在 main.dart 中）：

void main() {
  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
  runApp(MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(fontFamily: 'Poppins'),
      home: SplashScreen()));
}

别忘了import 'package:flutter/services.dart'

【讨论】：

当您分享代码sn-p作为答案时，也请尝试解释一下
当导航到新路线并且键盘打开时，状态栏将再次显示。您知道如何解决吗？

【解决方案5】：

由于Flutter 2.5 支持 Android 上的各种全屏模式，这些答案中的大多数已经过时了。

现在，隐藏状态栏的建议方法是：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

您可以将 SystemUiMode 设置为以下任一SystemUiMode enums：

身临其境
沉浸式粘性
向后倾斜
edgeToEdge

【讨论】：

【解决方案6】：

您可以在主函数中添加以下代码来隐藏状态栏。

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
));

【讨论】：

我没有对此进行测试，但我相信这会占用 24dp 并且不会让您使用您想要使用的区域。
@CopsOnRoad，这确实是它的作用。刚刚测试。
@Neil 你的意思是它不占用空间吗？
@CopsOnRoad 它不会隐藏状态栏，而只是使其与您的应用栏颜色相同（也没有边框）。所以是的，你可以说它（状态栏）。*is* 占用空间并且不会让你使用 OP 想要使用的区域。

【解决方案7】：

从颤振 2.5 开始，setEnabledSystemUIOverlays 已弃用，您可以通过以下方式消除状态栏：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

然后还原它

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

您还可以将List<SystemUiOverlay>? overlays 作为旧答案状态作为第二个命名参数传递给函数：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,overlays: [])

在列表中，您可以指定是否显示SystemUiOverlay.bottom、SystemUiOverlay.top 或不显示，方法是将列表留空[]

感谢Pierre 编辑：

详细了解不同的 SystemUiModes here：

【讨论】：

在此处阅读有关不同SystemUiModes 的更多信息：api.flutter.dev/flutter/services/SystemUiMode-class.html
链接失效了，这里提供的（api.flutter.dev/flutter/services/SystemUiMode-class.html）最后一行，你能检查一下吗。
完成@Spsnamta，感谢您的提醒！

【解决方案8】：

乔纳·威廉姆斯的这条评论在某些情况下也可能会有所帮助 https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 如果您不希望 AppBar 覆盖状态栏颜色。

您不能为应用栏提供状态栏颜色，但可以创建您自己的注释区域。现在还不是很直观但您可以使用sized: false 覆盖子注释区域由应用栏创建。

某处，也许是脚手架的孩子：
Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(...),
    sized: false,
    child: ...
  )
);
请注意，并非所有 Android 版本都支持状态栏颜色或图标亮度。请参阅有关 SystemUiOverlayStyle 的文档警告。

【讨论】：

【解决方案9】：

Step1：导入下面的包

import 'package:flutter/services.dart';

Step2：将以下代码添加到您的类初始化状态，如下所示

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    SystemChrome.setEnabledSystemUIOverlays([]);

  }

【讨论】：

【解决方案10】：

i：隐藏状态栏： SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

ii：使用 SafeArea Widget 它将确保您的应用不占用状态栏区域。

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            child: Text('Do not take status bar area on screen!'),
          ),
        );
}

【讨论】：

【解决方案11】：

 body: MyAppBody(),

改成

body: SafeArea(child: MyAppBody()),

【讨论】：

这不会隐藏状态栏，只是让body容器不会滑到后面。

【解决方案12】：

要实现此功能，您将需要 Flutter 服务 API。

实现它的示例步骤：

您需要导入package:flutter/services.dart。
将SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 放在有状态小部件的initState 方法中。
例如，在有状态小部件的 dispose 方法中放置 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]) 可在您从该屏幕返回时重新启用状态栏。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: MyApp(),
        );
      }
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
        super.initState();
      }
      @override
      void dispose() {      
        SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top,SystemUiOverlay.bottom]);
        super.dispose(); 
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('Sample App'),
          ),
          body: Center(
            child: Container(
              child: Text('Demo Screen.'),
            ),
          ),
        );
      }
    }

须知：

将SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]) 放在小部件的 build 方法中不是一个好主意，因为每次您的小部件重建时都会执行 build 方法，这会损害您的应用程序性能，并可能导致出现和消失等奇怪的错误状态栏或底部导航。
在 Android 上，如果您有一些需要使用键盘的输入字段，状态栏将再次出现，您需要使用其他方法 SystemChrome.restoreSystemUIOverlays() 来防止这种情况，或者使用 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]) 再次设置它更多信息你可以在这里找到https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
SystemChrome.setEnabledSystemUIOverlays() 是异步的

【讨论】：

【解决方案13】：

首先将 SystemChrome.setEnabledSystemUIOverlays([]); 添加到您的 Main 函数中。

这会留下前面答案中提到的轻微灰色区域。

我对此有一个简单的解决方法（只是一种解决方法，但在大多数情况下都有效）。

在AppBar() 中添加

backgroundColor: Colors.transparent,
elevation: 0.0,

希望对你有帮助

【讨论】：

【解决方案14】：

在 v2.3.0-17.0 之后，现已弃用以下功能

 SystemChrome.setEnabledSystemUIOverlays

为了在整个应用程序中隐藏状态栏（不仅仅是一个屏幕），我在应用程序主题中使用了以下两个属性

android -> app -> src -> main -> res -> values -> styles.xml

<item name="android:windowNoTitle">true</item>
<item name="android:windowFullscreen">true</item>

现在状态栏从启动画面到我的应用程序的任何屏幕都不可见。

【讨论】：

【解决方案15】：

以上部分内容已被弃用，取而代之的是：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: [SystemUiOverlay.bottom]);

我觉得奇怪的是，我把它放在我第二个屏幕的initState，而不是应用程序的void main，但它仍然应用于我的所有屏幕。

https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIMode.html

【讨论】：