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
}
SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
- Filip Rajimport 'package:flutter/services.dart';
SystemChrome.setEnabledSystemUIMode([SystemUiOverlay.bottom])
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);
1. 单屏幕模式下
@override
void initState() {
// put it here
super.initState();
}
2. 对于 main.dart 中的所有页面:
void main() {
// put it here
runApp(...);
}
由于Flutter 2.5现在支持Android上的各种全屏模式,因此这些答案中的大多数已过时。
现在,建议使用以下方法隐藏状态栏:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
您可以将 SystemUiMode 设置为以下任何一种SystemUiMode 枚举:
对于单个页面(在页面文件中):
@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'
您可以使用SystemChrome.setEnabledSystemUIOverlays([])
来隐藏状态栏,使用SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values)
将其恢复。
然而,现在还没有任何修复方法,状态栏隐藏时,应用栏的高度仍然保持不变,会有轻微的灰色区域存在。
请参见Github问题:https://github.com /flutter/flutter/issues/14432
您可以在主函数中添加以下代码来隐藏状态栏。
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
自Flutter 2.5以来,setEnabledSystemUIOverlays
已弃用,您可以通过以下方式隐藏状态栏:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
撤销它
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
根据早期回答,您还可以将 List<SystemUiOverlay>? overlays
作为函数的第二个命名参数传递:
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge,overlays: [])
在列表中,您可以指定是否显示SystemUiOverlay.bottom
、SystemUiOverlay.top
或通过将列表保留为空[]
来不显示任何内容。编辑感谢Pierre:
SystemUiMode
的更多信息:https://api.flutter.dev/flutter/services/SystemUiMode-class.html - PierreYou 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.
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])
,因为构建方法每次重建小部件时都会执行一次,这将损害您的应用程序性能并可能导致奇怪的错误,例如出现和消失的状态栏或底部导航栏。SystemChrome.restoreSystemUIOverlays()
来防止出现状态栏,或者使用SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom])
重新设置。更多信息可以在此处找到:https://api.flutter.dev/flutter/services/SystemChrome/setEnabledSystemUIOverlays.htmlSystemChrome.setEnabledSystemUIOverlays()
是异步的。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!'),
),
);
}