自适应设计最佳实践
自适应设计一些最佳实践的总结。
自适应设计推荐的最佳实践包括
设计注意事项
#分解你的组件
#在设计应用程序时，尝试将大型、复杂的组件分解为更小、更简单的组件。
重构组件可以减少采用自适应 UI 的复杂性，从而共享核心代码片段。 还有其他好处
- 在性能方面，拥有大量的
const组件可以提高重建时间，而不是拥有大型、复杂的组件。 - Flutter 可以重用
const组件实例，而较大的复杂组件必须为每次重建进行设置。 - 从代码健康的角度来看，将 UI 组织成更小、更易于理解的片段有助于降低每个
Widget的复杂性。 复杂度较低的Widget更易于阅读、更易于重构，并且不太可能出现令人惊讶的行为。
要了解更多信息，请查看 通用方法 中的自适应设计的 3 个步骤。
针对每种表单因素的设计优势
#除了屏幕尺寸之外，您还应该花时间考虑不同表单因素的独特优势和劣势。 在所有地方提供完全相同功能的跨平台应用程序并不总是理想的。 考虑是否应该专注于特定功能，甚至在某些设备类别上删除某些功能。
例如，移动设备是便携的并且具有摄像头，但不适合详细的创意工作。 考虑到这一点，您可能更专注于为移动 UI 捕获内容并使用位置数据对其进行标记，但专注于为平板电脑或桌面 UI 组织或操作该内容。
另一个例子是利用网络极低的共享门槛。 如果您正在部署 Web 应用程序，请决定支持哪些 深层链接，并根据这些链接设计您的导航路线。
这里的关键要点是考虑每个平台最擅长什么，并查看是否有您可以利用的独特功能。
首先解决触控问题
#构建出色的触控 UI 通常比传统的桌面 UI 更困难，部分原因是缺乏右键单击、滚轮或键盘快捷键等输入加速器。
一种解决此问题的方法是首先专注于出色的触控 UI。 您仍然可以使用桌面目标进行大部分测试，以提高迭代速度。 但是，请记住经常切换到移动设备以验证一切是否感觉良好。
在完善触控界面后，您可以为鼠标用户调整视觉密度，然后添加所有其他输入。 将这些其他输入视为加速器——使任务更快的替代方案。 重要的一点是考虑用户在使用特定输入设备时期望什么，并努力在您的应用程序中反映这一点。
实现细节
#不要锁定应用程序的屏幕方向。
#自适应应用程序在不同大小和形状的窗口上都应该看起来不错。 虽然将应用程序锁定到手机的纵向模式可以帮助缩小最小可行产品的范围，但它可能会增加使应用程序在未来具有自适应性的工作量。
例如，手机只会以全屏纵向模式渲染您的应用程序的假设并非保证。 多窗口应用程序支持变得越来越普遍，可折叠设备在许多用例中最好以并排运行多个应用程序的方式工作。
如果您绝对必须将应用程序锁定在纵向模式下（但不要这样做），请使用 Display API 而不是像 MediaQuery 这样的 API 来获取屏幕的物理尺寸。
总结
避免基于设备方向的布局
#避免在您的组件树的顶部附近使用 MediaQuery 的方向字段或 OrientationBuilder 来在不同的应用程序布局之间切换。 这类似于不要检查设备类型来确定屏幕大小的指导原则。 设备的屏幕方向也不一定能告诉您您的应用程序窗口有多少空间。
相反，使用 MediaQuery 的 sizeOf 或 LayoutBuilder，如 通用方法 页面中所述。 然后使用 Material 推荐的自适应断点，例如 Material。
不要占用所有水平空间
#使用窗口的全部宽度显示框或文本字段的应用程序在这些应用程序在大型屏幕上运行时效果不佳。
要了解如何避免这种情况，请查看 使用 GridView 布局。
避免检查硬件类型
#避免编写检查您正在运行的设备是“手机”还是“平板电脑”或任何其他类型设备的任何代码，以便做出布局决策。
您的应用程序实际获得的渲染空间并不总是与设备的完整屏幕尺寸相关。 Flutter 可以在许多不同的平台上运行，您的应用程序可能在 ChromeOS 上的可调整大小的窗口中运行，在平板电脑的多窗口模式下与其他应用程序并排运行，甚至在手机上以画中画模式运行。 因此，设备类型和应用程序窗口大小实际上并没有紧密联系。
相反，使用 MediaQuery 获取您的应用程序当前正在运行的窗口的大小。
这不仅对 UI 代码有帮助。 要了解抽象设备功能如何帮助您的业务逻辑代码，请查看 2022 年 Google I/O 演讲 Flutter 联合插件开发的课程。
支持各种输入设备
#应用程序应支持基本的鼠标、触摸板和键盘快捷键。 最常见的用户流程应支持键盘导航，以确保可访问性。 尤其是在大型设备上，您的应用程序应遵循键盘的可访问最佳实践。
Material 库提供了具有出色的默认行为的触控、鼠标和键盘交互的组件。
要了解如何将此支持添加到自定义组件，请查看 用户输入和可访问性。
恢复列表状态
#为了在设备方向改变时，不改变布局的列表中保持滚动位置，请使用 PageStorageKey 类。 PageStorageKey 在组件销毁后将组件状态持久化到存储中，并在重新创建时恢复状态。
您可以在 Wonderous 应用程序 中看到此示例，它将列表的状态存储在 SingleChildScrollView 组件中。
如果 List 组件在设备方向改变时改变其布局，您可能需要进行一些计算（示例）以在屏幕旋转时改变滚动位置。
保存应用程序状态
#应用程序应在设备旋转、窗口大小改变或折叠和展开时保留或恢复 应用程序状态。 默认情况下，应用程序应保持状态。
如果您的应用程序在设备配置期间丢失状态，请验证您的应用程序使用的插件和本机扩展是否支持设备类型，例如大型屏幕。 某些本机扩展在设备位置改变时可能会丢失状态。
有关发生这种情况的实际案例的更多信息，请查看 问题：折叠/展开导致状态丢失 在 为大型屏幕开发 Flutter 应用程序，Medium 上的免费文章。