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

【问题标题】：Flutter - Notch Area is blank when status bar is disabledFlutter - 禁用状态栏时缺口区域为空白
【发布时间】：2022-03-03 14:19:04
【问题描述】：

这是我的应用程序的正常外观：

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

试过SystemChrome.setEnabledSystemUIOverlays([]); 状态栏区域被隐藏但状态栏有黑色或空白区域

如果我设置SystemChrome.setEnabledSystemUIOverlays(SystemUiOverlay.values);

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

如果我设置SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.top]);

我得到了这个看起来很奇怪的导航栏，状态栏还在那儿

如果我设置SystemChrome.setEnabledSystemUIOverlays([SystemUiOverlay.bottom]);

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

尝试使用和不使用安全区。仍然没有得到想要的全屏。

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

【问题讨论】：

@Edman 谢谢。有没有人可以解决这个问题？

标签： android dart flutter

【解决方案1】：

在styles.xml中加入下面一行就可以解决问题了

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

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

【讨论】：

这是正确的答案，而不是 SafeArea - 这不起作用。

【解决方案2】：

这很简单。你可以通过将你的身体包裹成SafeArea来解决这个问题

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

【讨论】：

这个方案在Flutter 1.17版本不工作，其他版本不清楚

【解决方案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 issue link

【讨论】：