安全区域和媒体查询

本页面介绍了如何以及何时使用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的 padding 属性，该属性基本上是显示器中被系统 UI、显示缺口或状态栏部分遮挡的部分。

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

答案是SafeArea做了一件巧妙的事情，使其比仅使用原始MediaQueryData更有利。具体来说，它修改了公开给SafeArea子元素的MediaQuery，使其看起来好像添加到SafeArea的填充不存在。这意味着您可以嵌套SafeArea，并且只有最顶层的那个将应用避免缺口和系统 UI 所需的填充。

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

您可以使用SafeArea包装Scaffold小部件的主体，但您不必将其放在小部件树的这么高层级。SafeArea只需要包装那些如果被前面提到的硬件功能截断会导致信息丢失的内容。

例如，如果您希望应用程序故意延伸到缺口下方，则可以移动SafeArea以包装任何有意义的内容，并让应用程序的其余部分占据整个屏幕。附带说明的是，这是AppBar小部件默认执行的操作，也就是它如何在系统状态栏下方显示的方式。这也是建议将Scaffold的主体包装在SafeArea中而不是包装整个Scaffold本身的原因。

SafeArea可确保您的应用程序内容不会以通用方式被截断，并在新的具有不同形状和样式缺口的设备进入市场时确保您的应用程序获得成功。

除非另有说明，否则本网站上的文档反映了 Flutter 的最新稳定版本。页面上次更新于 2024-05-13。 查看源代码 或 报告问题.