SafeArea 与 MediaQuery

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

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

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

通常建议将 Scaffold 小部件的主体包装在 SafeArea 中作为良好的起点，但您并非总是需要将其置于小部件树的如此高层级。

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

使用 SafeArea 可确保您的应用内容不会被物理显示特性或操作系统 UI 截断，并让您的应用即使在新设备（具有不同形状和样式的切口）进入市场时也能成功。

SafeArea 如何用少量代码实现如此多的功能？在幕后，它使用了 MediaQuery 对象。

如 SafeArea 部分所述，MediaQuery 是一个用于创建自适应应用的强大小部件。有时您会直接使用 MediaQuery，有时您会使用 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 确保您的应用内容不会以通用方式被截断，并让您的应用即使在新设备（具有不同形状和样式的切口）进入市场时也能成功。