使用SystemChrome隐藏底部SystemUiOverlay状态栏空间未消失问题求助

我之前也碰到过一模一样的问题！当时折腾了好一会儿才摸清门道，分享几个亲测有效的解决思路：

1. 组合使用系统UI隐藏+透明样式设置 #

仅仅调用SystemChrome.setEnabledSystemUIOverlays([])只能隐藏按钮，但系统默认会保留导航栏的占位空间。你需要同时设置系统UI的透明样式，让页面内容可以延伸到这个区域：

@override
void initState() {
  super.initState();
  // 确保布局渲染完成后再执行系统UI设置
  WidgetsBinding.instance.addPostFrameCallback((_) {
    // 隐藏所有系统UI元素
    SystemChrome.setEnabledSystemUIOverlays([]);
    // 设置系统UI为透明，允许页面内容填充原导航栏空间
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      systemNavigationBarColor: Colors.transparent,
      systemNavigationBarDividerColor: Colors.transparent,
    ));
  });
}

2. 让页面布局真正填满屏幕 #

即使设置了透明样式，如果你的页面布局没有主动占满整个可用空间，还是会看到空白。可以通过以下方式调整：

• 在Scaffold中开启extendBody: true，这个属性会让页面内容延伸到底部导航栏的原位置：

Scaffold(
  extendBody: true,
  body: YourPageContent(),
);

• 确保你的内容布局使用Expanded、Container（配合height: double.infinity）等组件，强制占满父容器的所有空间。

3. 针对特殊设备的适配 #

部分安卓设备开启了手势导航模式时，可能会保留一个极小的底部提示条（比如一条细横线），这属于系统层面的设置，无法通过Flutter代码完全移除。如果需要适配这类情况，可以考虑：

• 在页面底部添加一个与背景色一致的占位条，视觉上融合这个提示区域；
• 引导用户关闭手势导航的“提示条”设置（不过这种方式不太友好，尽量不用）。

4. 注意Flutter版本兼容性 #

如果你使用的是较旧的Flutter版本，SystemChrome.setEnabledSystemUIOverlays已经被标记为废弃，建议改用SystemChrome.setEnabledUIMode：

SystemChrome.setEnabledUIMode(SystemUiMode.immersiveSticky);

这种模式会让系统UI完全隐藏，且用户滑动屏幕时才会临时显示，松开后再次隐藏，同时页面内容会自动填充整个屏幕。

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