SafeArea 和 MediaQuery

本页介绍了如何以及何时使用SafeAreaMediaQuery小部件。

SafeArea

#

在最新的设备上运行应用程序时,您可能会遇到用户界面的一部分被设备屏幕上的切口遮挡。您可以使用SafeArea小部件来解决此问题,该小部件会缩进其子小部件以避免干扰(如凹槽和摄像头切口),以及操作系统用户界面(如 Android 上的状态栏)或物理显示器的圆角。

如果您不希望出现这种行为,SafeArea小部件允许您禁用其四边上的填充。默认情况下,所有四边都已启用。

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

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

使用SafeArea可以确保您的应用程序内容不会被物理显示功能或操作系统用户界面切断,并为您的应用程序做好准备,即使新的设备具有不同的形状和样式的切口进入市场。

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

MediaQuery

#

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

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

SafeArea使用来自MediaQuery的数据来确定其子Widget缩进多少。具体来说,它使用MediaQuery填充属性,该属性基本上是显示器中被系统用户界面、显示器凹槽或状态栏部分遮挡的部分。

那么,为什么不直接使用MediaQuery呢?

答案是SafeArea做了一件聪明的事情,这使得它比仅仅使用原始MediaQueryData更有益。具体来说,它修改了SafeArea子级公开的MediaQuery,使其看起来好像添加到SafeArea的填充不存在。这意味着您可以嵌套SafeArea,并且只有最顶层的SafeArea将应用避免凹槽和系统用户界面的填充。

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

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

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

SafeArea确保您的应用程序内容不会以通用方式被切断,并为您的应用程序做好准备,即使具有不同形状和样式的切口的新的设备进入市场。