Flutter隐藏状态栏后出现黑色背景挤占内容问题求助

核心问题是隐藏状态栏后，Android系统默认用黑色填充原状态栏区域，且Flutter页面未自动延伸至该区域，导致黑块残留。以下是具体解决方案：

1. 调整Dart代码中的系统UI配置 #

在切换全屏状态时，不仅设置UI模式，还要指定系统栏为透明，让页面内容能覆盖原状态栏区域：

InkWell(
  onTap: () {
    if (showAppBar) {
      // 隐藏状态栏，仅保留底部导航栏
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: [SystemUiOverlay.bottom]);
      // 设置系统栏透明
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        systemNavigationBarColor: Colors.transparent, // 可选：底部导航栏也透明
      ));
      setState(() => showAppBar = false);
    } else {
      SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
      SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
      ));
      setState(() => showAppBar = true);
    }
  },
  child: ...,
)

2. 修改Android端styles.xml配置 #

确保系统允许绘制透明的系统栏背景，避免默认黑色填充：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:forceDarkAllowed">false</item>
        <item name="android:windowFullscreen">false</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

3. 确保页面布局延伸至状态栏区域 #

如果使用Scaffold，需根据showAppBar状态设置extendBodyBehindAppBar，让内容覆盖原状态栏位置：

Scaffold(
  appBar: showAppBar ? AppBar(title: const Text("Demo")) : null,
  extendBodyBehindAppBar: !showAppBar, // 隐藏AppBar时，body延伸到状态栏区域
  body: ...,
)

若未使用Scaffold，直接让根布局占满全屏即可（例如用Container(width: double.infinity, height: double.infinity)包裹内容）。

内容的提问来源于stack exchange，提问作者Co-7