自适应设计的最佳实践

自适应设计的推荐最佳实践包括：

在设计您的应用程序时，尝试将大型复杂 widget 拆分成更小、更简单的 widget。

重构 widget 可以通过共享核心代码来降低采用自适应 UI 的复杂性。此外还有其他好处：

• 在性能方面，许多小的 const widget 比大型复杂 widget 具有更好的重建时间。
• Flutter 可以重用 const widget 实例，而大型复杂 widget 必须在每次重建时都进行设置。
• 从代码健康角度来看，将 UI 组织成更小的块有助于降低每个 Widget 的复杂性。较不复杂的 Widget 更易于阅读、更易于重构，并且不太可能出现意外行为。

要了解更多信息，请查看通用方法中自适应设计的三个步骤。

除了屏幕尺寸之外，您还应该花时间考虑不同尺寸因子的独特优势和劣势。您的多平台应用程序并非总是能够在所有地方都提供相同的功能。考虑一下专注于特定功能，甚至在某些设备类别中删除某些功能是否合理。

例如，移动设备便携且具有摄像头，但不适合进行详细的创意工作。考虑到这一点，您可以更专注于捕获内容并使用位置数据对其进行标记以创建移动 UI，但更专注于组织或处理平板电脑或台式机 UI 的内容。

另一个示例是利用 Web 分享的极低门槛。如果您要部署 Web 应用，请决定要支持哪些深度链接，并以此为基础设计您的导航路线。

这里的关键要点是考虑每个平台最擅长什么，并查看是否存在您可以利用的独特功能。

由于缺乏右键单击、滚轮或键盘快捷键等输入加速器，构建出色的触控 UI 通常比传统的桌面 UI 更困难。

解决此挑战的一种方法是首先专注于出色的触控导向 UI。您仍然可以使用桌面目标进行大部分测试以提高迭代速度。但是，请记住经常切换到移动设备以验证一切是否正常。

在完善触控界面后，您可以微调鼠标用户的视觉密度，然后叠加所有其他输入。将这些其他输入作为加速器——使任务更快的替代方案。要考虑的重要事项是用户使用特定输入设备时的期望，并努力在您的应用程序中反映这一点。

自适应应用程序应该在不同大小和形状的窗口中看起来都很不错。虽然在手机上将应用程序锁定为纵向模式可以帮助缩小最小可行产品的范围，但它可能会增加将来使应用程序自适应所需的努力。

例如，假设手机只会以全屏纵向模式渲染您的应用程序并非保证。多窗口应用程序支持正变得越来越普遍，并且可折叠设备有许多最适合并排运行多个应用程序的用例。

如果您绝对必须将应用程序锁定在纵向模式（但不要这样做），请使用 Display API 而不是 MediaQuery 来获取屏幕的物理尺寸。

总而言之：

• 锁定屏幕对于某些用户来说可能是可访问性问题
• Android 大尺寸级别要求在最低级别 支持纵向和横向模式。
• Android 设备可以覆盖锁定的屏幕
• Apple 指南建议旨在支持两种方向

避免使用 MediaQuery 的 orientation 字段或 OrientationBuilder 来在不同的应用程序布局之间切换。这类似于不检查设备类型以确定屏幕尺寸的指导。设备的方向也不一定能告诉您您的应用程序窗口有多少空间。

相反，请使用 MediaQuery 的 sizeOf 或 LayoutBuilder，如通用方法页面中所述。然后使用Material 推荐的那些自适应断点。

使用窗口的全部宽度来显示框或文本字段的应用程序在这些应用程序在大屏幕上运行时效果不佳。

要了解如何避免这种情况，请查看使用 GridView 进行布局。

在做出布局决策时，避免编写检查您正在运行的设备是“手机”还是“平板电脑”或任何其他类型设备的代码。

您的应用程序实际获得的渲染空间并不总是与设备的完整屏幕尺寸相关联。Flutter 可以在许多不同的平台上运行，并且您的应用程序可能在 ChromeOS 上的可调整大小的窗口中运行，在平板电脑上以多窗口模式与另一个应用程序并排运行，甚至在手机上以画中画模式运行。因此，设备类型和应用程序窗口大小实际上并没有密切关联。

相反，使用 MediaQuery 来获取您的应用程序当前正在运行的窗口的大小。

这不仅对 UI 代码很有帮助。要了解抽象出设备功能如何帮助您的业务逻辑代码，请查看 2022 年 Google I/O 演讲Flutter 联邦插件开发课程。

应用程序应该支持基本的鼠标、触控板和键盘快捷键。最常见的用户流程应该支持键盘导航以确保可访问性。特别是，您的应用程序应遵循大型设备上键盘的可访问性最佳实践。

Material 库提供具有触控、鼠标和键盘交互的出色默认行为的 widget。

要了解如何将此支持添加到自定义 widget，请查看用户输入和可访问性。

为了在设备方向更改时布局不更改的列表中保持滚动位置，请使用PageStorageKey 类。PageStorageKey 在 widget 被销毁后将 widget 状态保留在存储中，并在重新创建时恢复状态。

您可以在Wonderous 应用程序 中看到一个示例，它在 SingleChildScrollView widget 中存储列表的状态。

如果 List widget 在设备方向更改时更改其布局，则您可能需要进行一些计算(示例) 以更改屏幕旋转时的滚动位置。

应用程序应该在设备旋转、更改窗口大小或折叠和展开时保留或恢复应用程序状态。默认情况下，应用程序应保持状态。

如果您的应用程序在设备配置期间丢失状态，请验证您的应用程序使用的插件和本机扩展是否支持设备类型，例如大屏幕。某些本机扩展在设备更改位置时可能会丢失状态。

有关实际发生这种情况的更多信息，请查看问题：折叠/展开导致状态丢失 在开发适用于大屏幕的 Flutter 应用程序 中，这是一篇关于 Medium 的免费文章。

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