Hiding/Removing Flutter 中的 StatusBar（点击按钮时）

Question

在我的应用程序中，单击按钮时，我希望状态栏完全隐藏。

我已经尝试过 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); 和 SystemChrome.setEnabledSystemUIOverlays([]); 它使 statusBar 变黑，但它仍然在屏幕顶部占用 space。

那么当我点击特定按钮时，如何让statusBar完全消失？

Answer 1

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]); 工作正常，您看到的剩余 space 只是 AppBar。您可以在隐藏状态栏的同时更改 AppBar 的大小，方法是在按下按钮时将其包裹在 PreferredSize widget and setting the size property to a variable that you change with 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"),
            ),
          ),
        ),
      ),
    );
  }
}

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

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

您可以使用 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;
    }
  }
}

Answer 2

在 Flutter 2.5 中，您可以使用以下代码段执行此操作：

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

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

身临其境
沉浸式粘性
边到边
靠背

Hiding/Removing Flutter 中的 StatusBar（点击按钮时）

Hiding/Removing StatusBar in Flutter (on button click)

statusbar

dart

flutter

flutter-layout