SafeArea 与 MediaQuery

本页讨论了何时以及如何使用 SafeArea 和 MediaQuery 小部件。

在最新设备上运行应用程序时，您可能会遇到部分 UI 被设备屏幕上的切口遮挡的情况。您可以使用 SafeArea 小部件来解决此问题，它会将其子小部件嵌入以避开入侵（如刘海和摄像头切口）、操作系统 UI（如 Android 上的状态栏）或物理显示器的圆角。

如果您不希望出现此行为，SafeArea 小部件允许您禁用其任何四个侧面的填充。默认情况下，所有四个侧面都已启用。

通常建议将 Scaffold 小部件的主体包装在 SafeArea 中，这是一个很好的起点，但您并非总是需要将其放置在 Widget 树的如此高处。

例如，如果您有意让应用程序延伸到切口下方，您可以将 SafeArea 移动到包装任何有意义的内容，并让应用程序的其余部分占据整个屏幕。

使用 SafeArea 可确保您的应用程序内容不会被物理显示功能或操作系统 UI 剪裁，即使新设备以不同的形状和样式的切口进入市场，也能确保您的应用程序成功运行。

SafeArea 如何在少量代码中完成如此多的工作？它在后台使用了 MediaQuery 对象。

如 SafeArea 部分所述，MediaQuery 是一个功能强大的小部件，用于创建自适应应用程序。有时您会直接使用 MediaQuery，有时您会使用 SafeArea，它在后台使用 MediaQuery。

MediaQuery 提供了大量信息，包括应用程序的当前窗口大小。它公开了辅助功能设置，如高对比度模式和文本缩放，或者用户是否正在使用 TalkBack 或 VoiceOver 等辅助功能服务。MediaQuery 还包含有关设备显示功能的信息，例如是否具有铰链或折叠。

SafeArea 使用 MediaQuery 中的数据来确定要嵌入其子 Widget 多少。具体来说，它使用 MediaQuery 填充属性，它基本上是被系统 UI、显示刘海或状态栏部分遮挡的显示区域。

那么，为什么不直接使用 MediaQuery 呢？

答案是 SafeArea 做了一件巧妙的事情，使其比原始 MediaQueryData 更具优势。具体来说，它修改了暴露给 SafeArea 子项的 MediaQuery，使其看起来好像添加到 SafeArea 的填充不存在。这意味着您可以嵌套 SafeArea，只有最顶层的 SafeArea 会应用所需的填充以避开刘海作为系统 UI。

随着您的应用程序增长和您移动小部件，如果您有多个 SafeArea，您不必担心应用了过多的填充，而如果您直接使用 MediaQueryData.padding，则会出现问题。

您*可以*将 Scaffold 小部件的主体包装在 SafeArea 中，但您*不必*将其放置在小部件树的如此高处。SafeArea 只需要包装如果被前面提到的硬件功能剪裁会导致信息丢失的内容。

例如，如果您有意让应用程序延伸到切口下方，您可以将 SafeArea 移动到包装任何有意义的内容，并让应用程序的其余部分占据整个屏幕。一个旁注是 AppBar 小部件默认就是这样做的，这就是它如何位于系统状态栏下方的。这也是为什么建议将 Scaffold 的主体包装在 SafeArea 中，而不是包装整个 Scaffold 本身。

SafeArea 确保您的应用程序内容不会以通用方式被剪裁，即使新设备以不同的形状和样式的切口进入市场，也能确保您的应用程序成功运行。