自适应设计的最佳实践

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

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

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

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

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

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

例如，移动设备便携且配备摄像头，但并不适合进行详细的创意工作。考虑到这一点，您可能更专注于在移动 UI 中捕获内容并使用位置数据对其进行标记，但更专注于在平板电脑或桌面 UI 中组织或操作这些内容。

另一个例子是利用网络极低的共享门槛。如果您要部署一个 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库提供了具有出色默认行为的组件，用于触摸、鼠标和键盘交互。

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

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

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

如果 List 小部件在设备方向改变时改变其布局，您可能需要进行一些数学运算（示例）来更改屏幕旋转时的滚动位置。

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

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

有关此问题在现实世界中的案例的更多信息，请查看 问题：折叠/展开导致状态丢失，位于 为大屏幕开发 Flutter 应用程序 中，这是一篇免费的 Medium 文章。