用于响应式布局的单子组件

一个单子组件布局控件允许我们改变其子组件的位置或大小。例如，我们可以使用 Center 将某个组件的位置居中显示在父容器中。

1Scaffold(
2  appBar: AppBar(
3    title: const Text('Without Center'),
4  ),
5  body: const FlutterLogo(size: 200.0),
6),
7
8Scaffold(
9  appBar: AppBar(
10    title: const Text('With Center'),
11  ),
12  body: const Center(
13    child: FlutterLogo(size: 200.0),
14  ),
15),

上述代码中展示了两个版本的 Scaffold，都只包含一个 Flutter 标志。在第一个版本中，标志位于默认位置；而在第二个版本中（第12行），标志被包裹在 Center 布局控件内。Center 是一个单子组件布局控件，它将子组件的位置调整为在 Scaffold 中居中显示。效果如下图所示。

直接放置在 Scaffold 中的 Flutter 标志

在 Center 控件内放置的 Flutter 标志

在左侧的第一个 Scaffold 版本中，标志位于默认位置——左上角。而在右侧的第二个版本中，标志被包裹在 Center 控件中。

用于响应式设计的布局控件

框架提供的一些单子组件布局控件在实现响应式用户界面时非常有用。它们定义了子组件的行为，使我们能够控制组件在屏幕上的显示方式。

我们在开发 Flutter 应用时可能已经接触过这些布局控件，却并未意识到它们可以用来实现响应式设计。本章将介绍以下几种单子组件布局控件：

• Align
• AspectRatio
• ConstrainedBox
• Expanded
• Flexible