自适应设计的最佳实践

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

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

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

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

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

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

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

另一个示例是利用网络极低的共享门槛。如果您要部署网络应用，请确定要支持哪些深度链接，并以此为目标设计导航路线。

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

构建出色的触控 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 的最新稳定版本。页面上次更新于 2024-05-13。 查看源代码 或 报告问题.