SafeArea 与 MediaQuery

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

在最新设备上运行您的应用时，您可能会遇到 UI 的某些部分被设备屏幕上的挖孔遮挡。您可以使用 SafeArea 组件来解决此问题，该组件会为其子组件添加内边距，以避免侵入（如刘海和摄像头挖孔），以及操作系统 UI（如 Android 上的状态栏），或物理显示器的圆角。

如果您不希望这种行为，SafeArea 组件允许您禁用其四个侧面的填充。默认情况下，启用所有四个侧面。

通常建议将 Scaffold 组件的主体用 SafeArea 包裹起来，作为良好的起点，但您并不总是需要将它放置在 Widget 树的这么高的位置。

例如，如果您故意希望您的应用在挖孔下方延伸，您可以将 SafeArea 移动到包裹有意义的内容周围，并让应用的其余部分占据整个屏幕。

使用 SafeArea 确保您的应用内容不会被物理显示功能或操作系统 UI 截断，并为您的应用在未来进入市场的新型、不同形状和风格挖孔的设备做好准备。

SafeArea 如何用少量代码完成这么多操作？在幕后，它使用了 MediaQuery 对象。

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

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

SafeArea 使用来自 MediaQuery 的数据来确定其子 Widget 需要添加多少内边距。具体来说，它使用 MediaQuery padding 属性，该属性基本上是显示器被系统 UI、显示器挖孔或状态栏部分遮挡的量。

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

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

随着您的应用增长以及您移动组件，您不必担心应用了过多的填充，因为您有多个 SafeArea，而直接使用 MediaQueryData.padding 会出现问题。

您可以将 Scaffold 组件的主体用 SafeArea 包裹起来，但您不必将它放置在小部件树的这么高的位置。SafeArea 只需要包裹那些如果被前面提到的硬件功能截断就会导致信息丢失的内容。

例如，如果您故意希望您的应用在挖孔下方延伸，您可以将 SafeArea 移动到包裹有意义的内容周围，并让应用的其余部分占据整个屏幕。需要注意的是，AppBar 组件默认情况下就是这样做的，这就是它位于系统状态栏下方的方式。这也是为什么建议将 Scaffold 的主体用 SafeArea 包裹起来，而不是将整个 Scaffold 包裹起来的原因。

SafeArea 确保您的应用内容不会以通用方式被截断，并为您的应用在未来进入市场的新型、不同形状和风格挖孔的设备做好准备。