在 Flutter 中隐藏/删除状态栏（点击按钮）

Posted 2023-04-18

【中文标题】在 Flutter 中隐藏/删除状态栏（点击按钮）

【英文标题】：Hiding/Removing StatusBar in Flutter (on button click)

【发布时间】：2020-10-26 12:50:52

【问题描述】：

在我的应用中单击按钮时，我希望绝对隐藏状态栏。

我已经尝试过 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); 和 SystemChrome.setEnabledSystemUIOverlays([]); 它使状态栏变黑，但它仍然占用屏幕顶部的空间。

那么当我单击特定按钮时，如何使状态栏完全消失？

【问题讨论】：

Similar Github issue

【参考方案1】：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); 工作正常，您看到的剩余空间只是AppBar。您可以在隐藏状态栏的同时更改 AppBar 的大小，方法是将其包装在 PreferredSize 小部件中并将 size 属性设置为您在按下按钮时使用 setState 更改的变量。

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

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

class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 

  double appBarHeight = 55;

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child: AppBar(
            title: const Text('Hide Status Bar'),
          ),
        ),
        body: Scaffold(
          body: Center(
            child: RaisedButton(
              onPressed: () 
                SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);
                setState(() 
                  appBarHeight = 35; // After status bar hidden, make AppBar height smaller
                );
              ,
              child: Text("Hide Bar"),
            ),
          ),
        ),
      ),
    );
  

编辑：隐藏状态栏、导航栏及其保留空间

隐藏状态栏、导航栏和为它们保留的空间，如下所示：

您可以使用SystemChrome.setEnabledSystemUIOverlays([]); 摆脱这两者，然后使用bool 和setState 将您的AppBar 设置为null，并将您的脚手架的resizeToAvoidBottomInset 属性设置为false。

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

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

class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => _MyAppState();


class _MyAppState extends State<MyApp> 
  bool showAppBar = true;

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        resizeToAvoidBottomInset: false,
        appBar: appBar(),
        body: Center(
          child: RaisedButton(
            onPressed: () 
              SystemChrome.setEnabledSystemUIOverlays([]);
              setState(() 
                showAppBar = false;
              );
            ,
            child: Text("Hide Bar"),
          ),
        ),
      ),
    );
  

  appBar() 
    if (showAppBar) 
      return AppBar(
        title: const Text('Hide Status Bar'),
      );
     else 
      return null;
    
  

【讨论】：

感谢您的回答，但单击按钮时我正在删除 appBar（我将 appBar 设置为 null）。所以我认为 AppBar 不是这个空间的原因。 NavBar 也离开了空间，你知道要删除那个空间吗？

@SardorbekRkh 我花了很长时间调查您的问题，并找到了解决方案。请参考我的编辑。我希望它有所帮助。

在我的情况下，statusBar 留下的空白空间是由于 SafeArea 造成的，删除它后，一切正常，但删除 SafeArea 对带有缺口的 ios 设备不利，但我以某种方式解决了它。感谢合作

【参考方案2】：

在Flutter 2.5 中，您可以使用以下 sn-p 执行此操作：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

您可以使用以下任何SystemUiMode enums：

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