如何在 Flutter 隐藏 Android 状态栏

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

Android Status Bar

113103 次浏览
小开
最佳答案

应该做你想做的事情。

你可以用 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

然后，当您需要重新显示它(如处置时)使用:

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


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


}
小开

你可以使用 SystemChrome.setEnabledSystemUIOverlays([])隐藏和 SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)再次把它带回来。

然而，将有轻微的灰色地带，并没有修复这一点，因为目前。当状态栏隐藏时，应用程序栏的高度保持不变。

参见 github 问题: https://github.com/flutter/flutter/issues/14432

小开

Jonah Williams 的这条评论在某些情况下可能也会有所帮助 Https://github.com/flutter/flutter/issues/24472#issuecomment-440015464 如果您不希望状态栏颜色被 AppBar 覆盖。

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

在某个地方，也许像断头台上的孩子:

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

注意，并非所有的 Android 版本都支持状态栏颜色或图标 参见关于 SystemUiOverlayStyle 的文档 注意事项。

小开

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

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

首先添加 < code > SystemChrome.setEnabledSystemUIOverlay ([]) ; 你的主要功能。

这就留下了一个稍微灰色的区域，正如前面的答案所提到的。

我有一个简单的解决方案(只是一个变通方案，在大多数情况下工作)。

在 AppBar()中只要加上

backgroundColor: Colors.transparent,
elevation: 0.0,

希望这个能帮上忙

小开 
import 'package:flutter/services.dart';

1. 隐藏状态栏

SystemChrome.setEnabledSystemUIMode([SystemUiOverlay.bottom])

enter image description here

2. 透明状态栏

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

enter image description here

3. 显示状态栏

SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

你需要输入这个代码:

1. 单屏

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

2. main.dart 中的所有页面:

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

步骤1: 导入以下软件包

import 'package:flutter/services.dart';

步骤2: 将下面的代码添加到您的类 init 状态，如下所示

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


}
小开

单页(页面档案) :

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

小开

I: 隐藏状态栏: SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

Ii: 使用安全区域小部件，它将确保您的应用程序不采取状态栏区域。

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

把这个换成

body: SafeArea(child: MyAppBody()),

enter image description here

小开

为了实现这个功能，您将需要 flutter 服务 API。

实施步骤示例:

  • 您需要导入 package:flutter/services.dart。
  • 将 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])放在有状态小部件的 initState 方法中。
  • 将 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])放在小部件的构建方法中并不是一个好主意，因为每次重新构建小部件时，构建方法都会执行，这会影响应用程序的性能，并且会导致奇怪的 bug，比如状态栏或底部导航条的出现和消失。
  • 在 Android 上，如果你有一些输入字段，在那里你需要使用键盘的状态栏将再次出现，你将需要使用其他方法 SystemChrome.restoreSystemUIOverlays()来防止这一点或设置它与 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])更多的信息，你可以找到这里 https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.html
  • SystemChrome.setEnabledSystemUIOverlays()是异步的
小开

在 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>

现在状态栏在我的应用程序中的任何屏幕上都看不到 Splash 屏幕。

小开

由于颤振2.5 setEnabledSystemUIOverlays是不推荐的，你可以通过以下方式消失状态栏:

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

然后恢复原状

SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);

还可以将一个 List<SystemUiOverlay>? overlays作为旧的应答状态作为第二个命名参数传递给函数，如下所示:

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

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

编辑感谢 皮埃尔:

了解更多关于不同的 SystemUiModes 给你:

小开

以上的一些观点不赞成:

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

我发现奇怪的是，我把它放在我的第二个屏幕的 initState，而不是在 void main的应用程序，但它是适用于我的所有屏幕，尽管如此。

Https://api.flutter.dev/flutter/services/systemchrome/setenabledsystemuimode.html

小开

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

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

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);

您可以将 SystemUiMode 设置为下列 SystemUiMode 枚举之一:

  • 身临其境
  • 沉浸式粘性
  • 靠背
  • EdgeToEdge
小开

对我来说 SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);是最好的。这样，如果你在底部向上滑动，状态栏和导航栏就会以透明的方式显示，如果你触摸其他地方，过一会儿它们就会消失。

使用 SystemUiMode.immersive时，如果从底部向上滑动，状态栏将永久显示，而导航栏是不透明的。

使用 SystemUiMode.leanBack时，如果向上滑动，导航栏将永久显示，而且它是不透明的。

小开 
import 'package:flutter/services.dart';

为了启用系统 UI 覆盖，我们需要调用 SystemChrome.setEnabledSystemUIMode (此方法取代 SystemChrome.setEnabledSystemUIOverlay)。

在 runApp ()之前将这些代码行添加到 main ()函数:

void main() {
// Add these 2 lines
WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setEnabledSystemUIOverlays([
SystemUiOverlay.bottom, //This line is used for showing the bottom bar
]);


// After that, call runApp() as usual
runApp(MyApp());
}

上面的代码将从所有屏幕上删除状态栏。如果您只想从特定的屏幕上删除它们，那么将设置代码放在 initState ()方法中:

@override
void initState() {
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [
SystemUiOverlay.bottom,
]);
}

如果您想再次显示状态栏，只需将 SystemUiOverlay.top 选项放在方括号中，或者删除 SystemChrome.setEnabledSystemUIMode 函数。

小开

这是我的工作

  @override
void initState() {
// TODO: implement initState
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
super.initState();
}

提交答案