自适应应用的通用方法

那么，你究竟如何处理为传统移动设备设计的应用程序，并使其在各种设备上都能精美显示呢？需要哪些步骤？

Google 工程师在大型应用程序中拥有这方面的丰富经验，他们建议采用以下 3 步方法。

首先，确定您计划使其动态的小部件。分析这些小部件的构造函数，并抽象出您可以共享的数据。

需要自适应的常见小部件包括：

• 对话框，包括全屏和模态对话框
• 导航 UI，包括轨道和底部栏
• 自定义布局，例如“UI 区域是更高还是更宽？”

例如，在 Dialog 小部件中，您可以共享包含对话框_内容_ 的信息。

或者，当应用程序窗口较小时，您可能希望在 NavigationBar 和 NavigationRail 之间切换，而当应用程序窗口较大时，则使用 NavigationRail。这些小部件可能共享一个可导航目标列表。在这种情况下，您可以创建一个 Destination 小部件来保存此信息，并指定 Destination 既有图标也有文本标签。

接下来，您将评估屏幕尺寸以决定如何显示您的 UI。

您可以通过两种方式确定显示区域的大小：MediaQuery 和 LayoutBuilder。

过去，您可能使用过 MediaQuery.of 来确定设备屏幕的大小。但是，当今的设备拥有各种尺寸和形状的屏幕，此测试可能会产生误导。

例如，您的应用程序目前可能占据大屏幕上的一个小窗口。如果您使用 MediaQuery.of 方法并得出结论认为屏幕很小（而实际上，应用程序在大屏幕上的一个小窗口中显示），并且您已将应用程序锁定为纵向模式，则会导致应用程序窗口锁定在屏幕中央，周围环绕着黑色。在大屏幕上，这绝非理想的 UI。

请记住，MediaQuery.sizeOf 返回应用程序整个屏幕的当前大小，而不仅仅是单个小部件。

您可以通过两种方式测量屏幕空间。您可以使用 MediaQuery.sizeOf 或 LayoutBuilder，具体取决于您是要获取整个应用程序窗口的大小，还是要获取更局部的尺寸。

如果您希望小部件全屏显示，即使应用程序窗口很小，也要使用 MediaQuery.sizeOf，以便您可以根据应用程序窗口本身的大小选择 UI。在上一节中，您希望根据整个应用程序的窗口来确定大小行为，因此您将使用 MediaQuery.sizeOf。

从 build 方法内部请求应用程序窗口的大小，例如 MediaQuery.sizeOf(context)，会导致每次 size 属性更改时重新构建给定的 BuildContext。

LayoutBuilder 与 MediaQuery.sizeOf 实现了类似的目标，但有一些区别。

LayoutBuilder 不是提供应用程序窗口的大小，而是提供父 Widget 的布局约束。这意味着您根据在小部件树中添加 LayoutBuilder 的特定位置获得大小信息。此外，LayoutBuilder 返回 BoxConstraints 对象而不是 Size 对象，因此您可以获得内容的有效宽度和高度范围（最小值和最大值），而不仅仅是固定大小。这对于自定义小部件很有用。

例如，想象一个自定义小部件，您希望大小基于专门为此小部件提供的空间，而不是一般的应用程序窗口。在这种情况下，请使用 LayoutBuilder。

此时，您必须决定在选择要显示的 UI 版本时使用什么大小断点。例如，Material 布局 指南建议对于宽度小于 600 个逻辑像素的窗口使用底部导航栏，而对于宽度为 600 像素或更大的窗口使用导航轨道。同样，您的选择不应取决于设备的 类型 ，而应取决于设备可用的窗口大小。

要完成一个在 NavigationRail 和 NavigationBar 之间切换的示例，请查看使用 Material 3 构建动画响应式应用程序布局。

下一页讨论如何确保您的应用程序在大屏幕和折叠式设备上看起来最佳。

除非另有说明，否则本网站上的文档反映的是 Flutter 的最新稳定版本。页面最后更新于 2025-01-30。 查看源代码 或 报告问题。