logo标签列表

如何在Flutter中隐藏Android的状态栏

flutterandroid-statusbar
141

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

Android状态栏

1
嗨，皮特，如何使其稳定并在其下启动我的应用程序屏幕？ - M.Usman
将您的主体内容用SafeArea小部件包装起来 代码示例：body: SafeArea(child: MyAppBody())， - S_i_l_e_n_t C_o_d_e_r
现在还没有任何永久的答案。您可以在第一次隐藏该栏时这样做。下次打开应用程序时，它将返回默认的Android状态。 - genericUser
21个回答
222

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 only hide the status bar

当你需要重新显示它（比如在销毁时）时，使用以下代码：

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

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

  }
3
这是否也会移除安卓底部的按钮栏？（确实会）。如果只想移除状态栏，正确的方法是什么？ - Deborah
36
@Deborah 我猜是这样的：SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); - Filip Raj
2
有没有办法只是禁用这种灰色的色调？ - Hannes Tiltmann
7
在 Android 上打开键盘时，状态栏会再次出现。 - BraveEvidence
1
关闭应用程序，再次打开，状态栏会再次出现！这并不能永久解决问题！ - genericUser
显示剩余4条评论
117
import 'package:flutter/services.dart';

1. 隐藏状态栏

SystemChrome.setEnabledSystemUIMode([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(...);
  }
我们应该在哪里写它？ - Rahul Khanna
@Sanjayrajsinh 当我只为第一个屏幕实现时，从第一个屏幕导航到第二个屏幕时会闪烁。 - Ranjit Shrestha
void main() { WidgetsFlutterBinding.ensureInitialized(); //你可能需要这一行 SystemChrome.setEnabledSystemUIOverlays([]); runApp(....); } - UenX
@UenX 使用代码文本来编写代码。 - Zuher Abud Said
1
我很惊讶这个有这么多的赞。使用这段代码会出现错误 ==> 参数类型 'List<SystemUiOverlay>' 无法分配给参数类型 'SystemUiMode'。 - GraSim
29

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

现在，建议使用以下方法隐藏状态栏：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

您可以将 SystemUiMode 设置为以下任何一种SystemUiMode 枚举：

  • 沉浸式
  • 粘性沉浸式
  • Leanback
  • 边缘到边缘
2022年最佳答案 - Simonov Dmitriy
27

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

@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'

1
当您将代码片段作为答案分享时，请尝试解释其中的内容。 - Yunus Temurlenk
3
当导航到新路由且键盘打开时，状态栏将再次显示。你知道怎样修复它吗？ - m.r.davari
26

您可以使用SystemChrome.setEnabledSystemUIOverlays([])来隐藏状态栏，使用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)将其恢复。

然而，现在还没有任何修复方法，状态栏隐藏时，应用栏的高度仍然保持不变，会有轻微的灰色区域存在。

请参见Github问题：https：//github.com /flutter/flutter/issues/14432

1
CollinJackson提到了同样的事情，而你只是添加了一些模糊的内容，所以这不是一个答案，更适合作为评论。 - CopsOnRoad
13

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

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.transparent,
));
4
我尚未进行测试，但我相信这将占据24个设备独立像素，并且不会让你使用你想要使用的区域。 - CopsOnRoad
1
@CopsOnRoad，确实是这样。我刚测试过了。 - Neil P.
@Neil 你的意思是它没有占用空间吗？ - CopsOnRoad
1
@CopsOnRoad 它并不隐藏状态栏，而只是使其与您的应用程序栏颜色相同（也没有边框）。所以，是的，你可以说它（状态栏）占据了空间，并且不会让你使用OP想要使用的区域。 - Neil P.
10

自Flutter 2.5以来，setEnabledSystemUIOverlays已弃用，您可以通过以下方式隐藏状态栏：

```dart SystemChrome.setEnabledSystemUIOverlays([]); ```
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

撤销它

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

根据早期回答，您还可以将 List<SystemUiOverlay>? overlays 作为函数的第二个命名参数传递：


SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,overlays: [])
在列表中，您可以指定是否显示SystemUiOverlay.bottom、SystemUiOverlay.top或通过将列表保留为空[]来不显示任何内容。

编辑感谢Pierre:

在此处了解更多有关不同SystemUiModes的信息：

1
在此处阅读有关不同 SystemUiMode 的更多信息：https://api.flutter.dev/flutter/services/SystemUiMode-class.html - Pierre
提供的链接（https://api.flutter.dev/flutter/services/SystemUiMode-class.html）无法访问，请检查一下最后一行。 - Spsnamta
4
这里的Jonah Williams的评论也许在某些情况下会有帮助，如果您不希望状态栏颜色被AppBar覆盖，请参考以下链接： https://github.com/flutter/flutter/issues/24472#issuecomment-440015464

You cannot provide a status bar color to the app bar, but you can create your own annotated region. It's not very intuitive right now, but you can use sized: false to override the child annotated region created by the app bar.

Somewhere, perhaps as a child of the scaffold:

Scaffold(
  body: AnnotatedRegion<SystemUiOverlayStyle>(
    value: const SystemUiOverlayStyle(...),
    sized: false,
    child: ...
  )
);

Note that not all Android versions support status bar color or icon brightness. See the documentation on SystemUiOverlayStyle for the caveats.

4
为了实现这个功能，你需要使用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])，因为构建方法每次重建小部件时都会执行一次，这将损害您的应用程序性能并可能导致奇怪的错误，例如出现和消失的状态栏或底部导航栏。
  • 在Android上，如果您有一些需要使用键盘的输入字段，则状态栏将再次出现，您需要使用其他方法SystemChrome.restoreSystemUIOverlays()来防止出现状态栏，或者使用SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])重新设置。更多信息可以在此处找到：https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
  • SystemChrome.setEnabledSystemUIOverlays()是异步的。
3

i: 隐藏状态栏：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

ii: 使用SafeArea小部件，它可以确保你的应用程序不占用状态栏区域。

@override
Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Container(
            child: Text('Do not take status bar area on screen!'),
          ),
        );
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接