创建响应式和自适应应用

内容

Flutter 的主要目标之一是创建一个框架，让你能够从一个代码库开发应用，这些应用在任何平台上看起来都很棒，而且感觉也很好。

这意味着你的应用可能出现在各种尺寸的屏幕上，从手表到带有两个屏幕的可折叠手机，再到高清显示器。

描述此场景概念的两个术语是自适应和响应式。理想情况下，你希望你的应用同时具备这两者，但这到底是什么意思？这些术语很相似，但它们并不相同。

自适应应用和响应式应用的区别

自适应和响应式可以被视为应用的两个独立维度：你可以拥有一个不自适应的响应式应用，反之亦然。当然，一个应用可以同时具备这两个特性，也可以都不具备。

响应式: 通常，响应式应用已针对可用的屏幕尺寸调整了其布局。通常这意味着（例如），如果用户调整窗口大小或更改设备方向，则重新布局 UI。当同一个应用可以在各种设备上运行时，这一点尤其必要，从手表、手机、平板电脑到笔记本电脑或台式电脑。
自适应: 自适应应用以在不同设备类型（例如移动设备和台式机）上运行，需要处理鼠标和键盘输入以及触摸输入。这也意味着对应用的可视密度、组件选择的工作方式（例如级联菜单与底部工作表）、使用特定于平台的功能（例如顶级窗口）等有不同的期望。

在以下 5 分钟视频中了解更多信息

Flutter 允许您创建可自动适应设备屏幕大小和方向的应用。

有两种基本方法来创建具有响应式设计的 Flutter 应用

使用 LayoutBuilder 类: 从其 builder 属性中，您将获得一个 BoxConstraints 对象。检查约束属性以决定要显示的内容。例如，如果您的 maxWidth 大于您的宽度断点，则返回一个 Scaffold 对象，其中包含一行，左侧有一个列表。如果它较窄，则返回一个 Scaffold 对象，其中包含一个抽屉，其中包含该列表。您还可以根据设备的高度、纵横比或其他属性调整显示。当约束发生变化时（例如，用户旋转手机或将您的应用放入 Android 上的磁贴 UI 中），构建函数将运行。
在您的构建函数中使用 MediaQuery.of() 方法: 这将为您提供当前应用的大小、方向等。如果您想根据完整上下文而不是仅根据特定小组件的大小做出决策，这将更有用。同样，如果您使用此方法，那么当用户以某种方式更改应用的大小时，您的构建函数将自动运行。