响应式设计的最佳实践

响应式设计的推荐最佳实践包括

在设计应用时，尝试将大型复杂的组件拆分为更小、更简单的组件。

重构组件可以通过共享核心代码片段来降低采用响应式 UI 的复杂性。还有其他好处：

• 在性能方面，拥有许多小的 const 组件比拥有大型复杂组件更能缩短重绘时间。
• Flutter 可以重用 const 组件实例，而一个大型复杂组件在每次重绘时都必须重新设置。
• 从代码健康的角度来看，将 UI 组织成更小的片段有助于降低每个 Widget 的复杂性。复杂性较低的 Widget 更具可读性，更容易重构，也更不容易出现意想不到的行为。

要了解更多信息，请参阅通用方法中响应式设计的 3 个步骤。

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

例如，移动设备便携且配有摄像头，但不太适合进行精细的创意工作。考虑到这一点，移动端 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 库提供的组件在触摸、鼠标和键盘交互方面具有出色的默认行为。

要了解如何将此支持添加到自定义组件，请查看用户输入与无障碍性。

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

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

如果 List 组件在设备方向改变时改变其布局，你可能需要进行一些计算（示例）来在屏幕旋转时改变滚动位置。

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

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

有关发生此情况的真实案例的更多信息，请查看 Medium 上的一篇免费文章 《为大屏幕开发 Flutter 应用》中的 “问题：折叠/展开导致状态丢失”。