如何隐藏系统底部导航栏并显示状态栏？解决触摸时底栏闪显问题

你当前使用的SystemUiMode.manual模式下，系统仍会在触摸屏幕时临时唤起底部导航栏，这是该模式的默认交互逻辑。要彻底避免这个问题，你需要切换到沉浸式粘性模式或沉浸式模式，结合指定仅保留状态栏的配置：

方案一：使用沉浸式粘性模式（推荐） #

这种模式下，触摸屏幕不会唤起系统导航栏，只有从屏幕边缘滑动才会触发，且导航栏显示后会自动隐藏，完全匹配你的需求：

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

方案二：使用沉浸式模式 #

如果需要更严格的控制（比如滑动边缘唤起导航栏后不会自动隐藏，需手动调用代码隐藏），可以采用这个模式：

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

使用该模式时，若导航栏被唤起，你需要在合适的时机（比如页面交互完成后）重新调用上述代码来隐藏它。

额外注意事项 #

• 确保代码在WidgetsFlutterBinding.ensureInitialized()之后调用，避免初始化顺序问题：

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: [
    SystemUiOverlay.top,
  ]);
  runApp(const MyApp());
}

• 如果是在页面内动态设置，建议在initState方法中执行，并在dispose时按需恢复默认模式：

@override
void initState() {
  super.initState();
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersiveSticky, overlays: [
    SystemUiOverlay.top,
  ]);
}

@override
void dispose() {
  // 恢复默认系统UI模式
  SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
  super.dispose();
}

内容的提问来源于stack exchange，提问作者faccio