Flutter 永久隐藏导航栏答案

【问题标题】：Flutter permanently hide navigation barFlutter 永久隐藏导航栏
【发布时间】：2019-07-27 18:14:11
【问题描述】：

我在 Flutter 中遇到了一个问题，至少是 Android 模拟器，这很烦人。

我在全屏模式下使用屏幕，所以我想摆脱底部导航栏。

为此，在stackoverflow中研究和检查后，我使用以下命令：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

当buid 方法启动时，它被放置在类的顶部。

问题在于，它确实有效，底部栏消失了，但是...一旦我与屏幕交互，它就会从底部弹出，覆盖任何东西......

这特别烦人，因为我的应用程序底部有一个标签小部件......所以只要我触摸屏幕，底部栏就会弹出......所以我无法真正触摸标签，我触摸了覆盖的底部吧。

有谁知道这个问题或者有过经历吗？

【问题讨论】：

stackoverflow.com/a/54435948/217408 可能会有所帮助
@GünterZöchbauer 我认为您回答了状态栏，而 OP 要求提供导航栏。
您可以使用 AnnotatedRegion 提供不同的值。没有调查 AppBar 实际覆盖了哪些值
您找到解决方案了吗？
有什么解决办法吗？？？（提出这个问题）

标签： android dart flutter android-emulator bottombar

【解决方案1】：

在构建小部件之前将此设置为您的主类，试试这个

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(
          debugShowCheckedModeBanner: false,
          home: MyApp(),
        );
      }
    }
    
    class MyApp extends StatefulWidget {
      @override
      _MyAppState createState() => _MyAppState();
    }
    
    class _MyAppState extends State<MyApp> {
      @override
      void initState() {
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        SystemChrome.setEnabledSystemUIOverlays([]);
        return Scaffold(
          appBar: AppBar(
            title: Text('Sample App'),
          ),
          body: Center(
            child: Container(
              child: Text('Demo Screen.'),
            ),
          ),
        );
      }
    }

【讨论】：

现在我明白了这个问题......@shirsh shukla 是对的。如果您将 SystemChrome.setEnabledSystemUIOverlays() 放在您的构建中，它确实有效。但问题是，如果您只想消失底部导航栏。 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);不幸的是不会工作。

【解决方案2】：

要实现此功能，您将需要 Flutter 服务 API。

实现它的示例步骤：

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

【讨论】：