Flutter - 禁用状态栏时，缺口区域为空白

Question

这就是我的应用程序通常的样子：

我想隐藏状态栏区域和底部导航栏，以便全屏显示图像。

• 试过

  SystemChrome.setEnabledSystemUIOverlays([]);

  状态栏区域被隐藏但状态栏处有黑色或空白区域

• 如果我设置

  SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

然后我得到与 [image1][1] 相同的结果

• 如果我设置

  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

我发现导航栏看起来很奇怪，状态栏仍然在那里

• 如果我设置

  SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

状态栏区域为黑色并出现导航栏

尝试过有或没有安全区域。仍然没有获得所需的全屏。

有什么方法可以隐藏状态栏（不创建空白区域）并隐藏导航栏，使图像全屏显示，即什至利用凹口侧面区域？

Answer 1

在 styles.xml 中添加以下行即可解决问题

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>

参考：https://github.com/flutter/flutter/issues/46486

Answer 2

这个方法很简单。您可以通过将身体包裹成

SafeArea

来解决此问题

Scaffold(
  body: SafeArea(
    child: Text("Hello"),
  ),
),

Answer 3

通过在styles.xml中添加第一行代码和第二行代码，您的想要覆盖在缺口上。

<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item> 

SystemChrome.setEnabledSystemUIOverlays([]);

您的 styles.xml 文件在进行更改后应该是什么样子。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
    <style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
    
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
        <item name="android:windowBackground">?android:colorBackground</item>
        <item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>
    </style>
</resources>

帮助：Github问题链接

Answer 4

很多人提到我们需要添加
?android:colorBackground 在NormalTheme 下的values > styles.xml 中并相应地设置系统chrome ui 模式。

然而，大多数人都没有提及将其添加到values-night > styles.xml 下。事实证明，我的设备处于深色模式，因此仅将其设置为values>styles 并没有显示任何效果。希望它能帮助其他人