自适应设计最佳实践

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

在设计应用时，尽量将大型复杂的小部件分解成更小、更简单的小部件。

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

• 在性能方面，拥有大量小的 const 小部件比拥有大型复杂的小部件能更快地重建。
• Flutter 可以重用 const 小部件实例，而较大的复杂小部件则必须为每次重建进行设置。
• 从代码健康的角度来看，将 UI 组织成更小的片段有助于降低每个 Widget 的复杂性。一个不那么复杂的 Widget 更具可读性，更容易重构，并且不太可能出现意外行为。

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

除了屏幕尺寸之外，你还应该花时间考虑不同尺寸设备的独特优势和劣势。你的多平台应用并非总能在所有地方提供相同的功能。考虑在某些设备类别上是否应该专注于特定功能，甚至移除某些功能。

例如，移动设备便携并有摄像头，但它们不适合进行细致的创意工作。考虑到这一点，你可能会更侧重于为移动 UI 捕获内容并用位置数据对其进行标记，但对于平板电脑或桌面 UI，则侧重于组织或操作该内容。

另一个例子是利用网络的极低共享门槛。如果你正在部署 Web 应用程序，请决定支持哪些深层链接，并以此为念设计你的导航路由。

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

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

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

在完善了触控界面之后，你可以调整鼠标用户的视觉密度，然后添加所有其他输入。将这些其他输入视为加速器——使任务更快的替代方案。需要考虑的重要事项是用户在使用特定输入设备时期望什么，并在你的应用中体现出来。

自适应应用在不同大小和形状的窗口上都应该表现良好。虽然将应用锁定到手机上的竖屏模式可以帮助缩小最小可行产品的范围，但它会增加未来使应用自适应所需的精力。

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

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

总结一下

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

避免在 widget 树顶部附近使用 MediaQuery 的 orientation 字段或 OrientationBuilder 来切换不同的应用程序布局。这类似于不检查设备类型来确定屏幕尺寸的指导。设备的朝向也并不一定能告知您应用程序窗口有多少可用空间。

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

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

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

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

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

相反，使用 MediaQuery 获取你的应用当前运行的窗口大小。

这不仅对 UI 代码有帮助。要了解抽象出设备功能如何帮助您的业务逻辑代码，请查看 2022 年 Google I/O 演讲 Flutter lessons for federated plugin development。

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

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

要了解如何为自定义 widget 添加此支持，请查看用户输入与辅助功能。

要维持列表中的滚动位置，且当设备方向改变时其布局不改变，请使用 PageStorageKey 类。PageStorageKey 会在 widget 被销毁后将其状态持久化到存储中，并在重新创建时恢复状态。

你可以在Wonderous 应用中看到一个示例，它将列表的状态存储在 SingleChildScrollView 小部件中。

如果 List widget 在设备方向改变时改变了其布局，您可能需要进行一些数学计算（示例）才能在屏幕旋转时改变滚动位置。

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

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

有关实际发生此情况的更多信息，请查看 Medium 上的免费文章 Developing Flutter apps for Large screens 中的 问题：折叠/展开导致状态丢失。