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

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

One of Flutter’s primary goals is to create a framework that allows you to develop apps from a single codebase that look and feel great on any platform.

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

This means that your app may appear on screens of many different sizes, from a watch, to a foldable phone with two screens, to a high def monitor.

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

Two terms that describe concepts for this scenario are adaptive and responsive. Ideally, you’d want your app to be both but what, exactly, does this mean? These terms are similar, but they are not the same.

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

The difference between an adaptive and a responsive app

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

Adaptive and responsive can be viewed as separate dimensions of an app: you can have an adaptive app that is not responsive, or vice versa. And, of course, an app can be both, or neither.

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

Responsive
Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer.

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

Adaptive
Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.

构建一个响应式的 Flutter 应用

Creating a responsive Flutter app

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

Flutter allows you to create apps that self-adapt to the device’s screen size and orientation.

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

There are two basic approaches to creating Flutter apps with responsive design:

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

Use the LayoutBuilder class
From its builder property, you get a BoxConstraints object. Examine the constraint’s properties to decide what to display. For example, if your maxWidth is greater than your width breakpoint, return a Scaffold object with a row that has a list on the left. If it’s narrower, return a Scaffold object with a drawer containing that list. You can also adjust your display based on the device’s height, the aspect ratio, or some other property. When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.

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

Use the MediaQuery.of() method in your build functions
This gives you the size, orientation, etc, of your current app. This is more useful if you want to make decisions based on the complete context rather than on just the size of your particular widget. Again, if you use this, then your build function automatically runs if the user somehow changes the app’s size.

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

Other useful widgets and classes for creating a responsive UI:

更多资源

Other resources

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

For more information, here are a few resources, including contributions from the Flutter community:

创建自适应的 Flutter 应用

Creating an adaptive Flutter app

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

Learn more about creating an adaptive Flutter app with Building adaptive apps, written by the gskinner team.

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

You might also check out the following episodes of The Boring Show:

Adaptive layouts

Adaptive layouts, part 2

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

For an excellent example of an adaptive app, check out Flutter Folio, a scrapbooking app created in collaboration with gskinner and the Flutter team:

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

The Folio source code is also available on GitHub. Learn more on the gskinner blog.

更多资源

Other resources

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

You can learn more about creating platform adaptive apps in the following resources: