如何在Flutter中隐藏Android的底部导航栏

Question

我在Flutter和Android开发方面都很新手，但是有没有可能以编程的方式隐藏底部导航栏（请参见下面我所指的项目）？

- BenSabo

Answer 1

试一下这个： SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

文档

- Coeus.D

---

我用了这个，但之后出现了一个空白的白色空间。而且真的什么都放不进去。 - BenSabo

哦，问题解决了。 脚手架（ resizeToAvoidBottomPadding: false, （调整大小以避免底部填充：false） appBar: new AppBar(), （应用栏：新的应用栏） ); - BenSabo

这似乎已经过时了。 - Panduranga Rao Sadhu

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top])对我无效。触摸屏幕时，底部的工具栏仍然会持续显示。 - genericUser

似乎Flutter团队对此毫不关心。https://github.com/flutter/flutter/issues/62412 - genericUser

Answer 2

在撰写本答案时，这里的所有其他帖子都已过时，使用setEnabledSystemUIOverlays将会收到弃用消息。

要隐藏系统导航栏或状态栏，请导入：

import 'package:flutter/services.dart';

使用服务SystemChrome.setEnabledSystemUIMode

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky);

setEnabledSystemUIMode函数接收SystemUiMode枚举类型，包含以下选项：

• leanBack - 点击屏幕任意位置可显示状态和导航栏的全屏模式。

• immersive - 在屏幕边缘上滑动手势即可显示状态和导航栏的全屏模式。

• immersiveSticky - 在屏幕边缘上滑动手势可以临时显示状态和导航栏的全屏模式。

• edgeToEdge - 应用程序上方渲染状态和导航元素的全屏模式。

• manual - 手动声明配置[SystemUiOverlay]。 (查看文档获取更多信息)

- coder

---

有用的回答！ - undefined

Answer 3

通过下面的静态方法，可以指定应用程序在运行时需要显示的一组系统覆盖层：

  SystemChrome.setEnabledSystemUIOverlays(List<SystemUiOverlay> overlays)

示例：

1 - 隐藏底部导航栏，同时保留状态栏可见。

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

2 - 保持底部导航可见，同时隐藏状态栏。

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

3 - 隐藏底部导航栏和状态栏的方法是同时隐藏

SystemChrome.setEnabledSystemUIOverlays([]);

4-为了使它们都可见

 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top, SystemUiOverlay.bottom]);

- Mahmoud Abu Alheja

Answer 4

使用SystemChrome.setEnabledSystemUIOverlays([])来隐藏状态栏和导航栏。

- Gokul Nath KP

Answer 5

我觉得你可以使用这个。

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

在您的initState()中。

- theboshy

Answer 6

目前Flutter中存在此功能的错误，您可以在此处查看该问题。

https://github.com/flutter/flutter/issues/62412

通常情况下，您需要执行以下操作：

SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]); 

- cs guy

Answer 7

@Coder的答案只是一次性隐藏按钮，但是如果用户再次召唤它们（通过向上滑动），按钮将保持可见。

如何在应用启动和用户召唤按钮后隐藏按钮：

根据我的测试，当按钮被召唤时，Flutter会重新绘制根部件的所有内容。可以利用这一点，在每次重新绘制根部件时运行一个定时器来隐藏按钮。

import 'dart:async';

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  // hide android buttons when the app starts
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  static const immersiveModeDelaySeconds = 4;

  @override
  Widget build(BuildContext context) {
    // every time the root widget is rebuilt, hide the buttons after n seconds.
    Timer(Duration(seconds: immersiveModeDelaySeconds), () {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
    });

    // run the rest of the app
    return MaterialApp(home: Container());
  }
}

- Matt

Answer 8

你可以按照这种方法隐藏系统导航栏。

1. 在你的 main.dart 文件中导入 services.dart 包

import 'package:flutter/services.dart';

在你的 void main(){} 中添加以下内容。

void main(){

  WidgetsFlutterBinding.ensureInitialized();

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

  runApp(const <Your App Name>());

}

- hrithik23

Answer 9

此方法已过时 SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

仅显示状态栏

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,overlays: [SystemUiOverlay.top]);

仅显示系统导航栏

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

隐藏两者

SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky,
    overlays: []);

最好是将它放在runApp方法之前，像这样

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays:[]).then(
        (_) => runApp(MyApp()),
  );
}

- Abdullah Ali