创建响应式和自适应的应用

Flutter 的首要目标，是构建一个可以使用单一代码来源，开发在所有平台上都有着良好的视觉和体验的应用的框架。

这意味着你的应用可能会在不同大小的屏幕上使用，从智能手表，到可折叠的双屏设备，再到高清显示器。

通常这样的考量被分为两种概念：自适应 和 响应式。理想条件下，你的应用应该两者兼具，但是它们究竟代表了什么？这两种概念有些类似，但并不是同一种含义。

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

自适应 和 响应式 可以看作应用里的两种维度：你的应用可能是自适应的，但不是响应式的，又或是反行其道。当然，你的应用可能既自适应又为响应式，也可能两者均未实现。

响应式
通常来说，一个 响应式 应用的布局会根据可用的屏幕大小而调整。常见的场景是在用户重新调整窗口大小或旋转屏幕时，重新布局 UI。对于需要在多种设备（手表、手机、平板、笔记本或台式机）上运行的应用而言，这是必要的要素。

自适应
应用以 自适应 的方式在不同的设备上（移动端和桌面端）运行，需要同时处理鼠标、键盘和触控输入。这也意味着应用的视觉密度、组件的选择（层级菜单或底部抽屉）、平台特定的行为（例如置顶的窗口）等内容将在不同的平台上有一定的差异。

构建一个响应式的 Flutter 应用

Flutter 让你能够构建自动适配屏幕大小和旋转方向的应用。

构建响应式设计的 Flutter 应用，有以下两种较为基础的方式：

使用 LayoutBuilder 类
通过它的 builder 属性，你可以得到一个 BoxConstraints 对象。你可以检查约束里的属性，来决定如何进行显示。例如，如果约束里的 maxWidth 超过了你的宽度分界点，你可以返回一个 Scaffold，它包含一列内容，左侧是一个列表。如果约束更小，则返回一个列表在抽屉里的 Scaffold。你也可以根据你的设备高度、屏幕的比例或者其他的属性，来调整你的显示。当约束改变时（例如用户旋转了手机，或是在 Android 上将应用放置到 tile UI 中）构建方法会运行。

在构建方法中使用 MediaQuery.of() 方法
这个方法可以获取到当前应用（基于上下文）的尺寸、旋转方向等信息。如果你需要基于完整的上下文信息进行布局决策，而不是基于特定的 widget，这个方法将非常有用。同样的，如果应用的尺寸发生了改变，构建方法也会自动执行。

以下是其他有助于构建响应式界面的 widget：

• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• LayoutBuilder
• MediaQuery
• MediaQueryData
• OrientationBuilder

更多资源

想了解更多信息，以下是一些来自社区贡献的资源：

• 使用 Flutter 开发兼顾多种屏幕尺寸和旋转的应用，由 Deven Joshi 撰写

• 使用 Flutter 构建响应式界面，由 Raouf Rahiche 撰写

• 构建响应式的 Flutter 跨平台的登录页，由 Priyanka Tyagi 撰写

• 如何根据不同的屏幕大小构建响应式的 Flutter 应用？，在 StackOverflow 上的一个问题。

创建自适应的 Flutter 应用

你可以阅读由 gskinner 团队撰写的 构建自适应的应用 了解更多关于构建自适应应用的内容。

你也可以观看下面几期关于自适应布局的 The Boring Show：

Adaptive layouts

Adaptive layouts, part 2

想要尝试精美的自适应应用，可以下载由 gskinner 和 Flutter 团队共建的剪贴板应用 Flutter Folio：

Folio 应用的源代码 也可以在 GitHub 找到，你可以阅读 gskinner 的博客 了解更多内容。

更多资源

你可以在以下的资源中了解更多关于如何构建自适应平台应用的内容：

• 不同平台操作体验的差异和适配，站内的另一篇文档。

• 设计真正能够自适应的用户交互，由 Aloïs Deniel 在今年的 FlutterViking 会议上发布的文章和视频。

• 以自适应应用为目标编写的 Flutter Gallery 应用（源代码仓库）。