Flutter 布局详解及实践指南

Flutter 提供了强大的布局系统，通过组合多个布局组件，你可以构建复杂且灵活的 UI 界面。本篇文章将详解常用的布局组件及其使用场景，帮助你在实际开发中灵活运用这些布局组件。

一、基础布局组件

1. Column 和 Row

Column 和 Row 是 Flutter 中最基础的布局组件，用于将子组件按垂直或水平排列。

• Column：垂直布局，子组件依次向下排列。
• Row：水平布局，子组件依次向右排列。

常见属性：

• mainAxisAlignment：主轴对齐方式。

  • 在 Column 中，主轴是垂直方向；在 Row 中，主轴是水平方向。
  • 取值：MainAxisAlignment.start（起点对齐）、MainAxisAlignment.center（居中对齐）、MainAxisAlignment.spaceBetween（两端对齐，中间平分空隙）等。

• crossAxisAlignment：交叉轴对齐方式。

  • 在 Column 中，交叉轴是水平方向；在 Row 中，交叉轴是垂直方向。
  • 取值：CrossAxisAlignment.start（交叉轴起点对齐）、CrossAxisAlignment.end（交叉轴终点对齐）、CrossAxisAlignment.stretch（拉伸填充交叉轴）。

• mainAxisSize：决定 Column 或 Row 沿主轴占据的空间量。

  • MainAxisSize.max：占据父容器的所有可用空间（默认）。
  • MainAxisSize.min：仅占据子组件所需的最小空间。

2. Padding

Padding 控件用于在子组件的四周添加内边距，通常与 Column 或 Row 结合使用，避免子组件贴近容器边界。

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Hello, Flutter!'),
)

3. Expanded

Expanded 用于让子组件在 Row 或 Column 中占据剩余的可用空间。通常用于在多个组件中按比例分配布局空间。

Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.green)),
  ],
)

4. Flexible

Flexible 和 Expanded 类似，也用于控制子组件的大小。不同之处在于，Flexible 可以允许子组件根据其内容进行调整，而 Expanded 则会强制填充可用空间。

Flexible(
  child: Container(color: Colors.blue),
)

二、高级布局组件

1. Stack

Stack 允许你将子组件叠放在一起，常用于创建层叠效果，例如背景图片加上前景内容。

子组件的布局方式可以通过 Positioned 控制，例如固定子组件在某个位置：

Stack(
  children: [
    Positioned(
      top: 10,
      left: 10,
      child: Container(width: 100, height: 100, color: Colors.red),
    ),
    Container(width: 50, height: 50, color: Colors.blue),
  ],
)

2. Align 和 Alignment

Align 控件用于在父容器内对齐单个子组件，通过 alignment 属性设置子组件的相对位置。

Align(
  alignment: Alignment.topRight, // 子组件对齐到右上角
  child: Container(width: 100, height: 100, color: Colors.green),
)

Alignment 通过 (x, y) 坐标系定义对齐位置，Alignment.center 为 (0, 0)，其他常用值有：

• Alignment.topLeft：左上角对齐。
• Alignment.bottomRight：右下角对齐。

3. Wrap

Wrap 是一种流式布局，当子组件超出屏幕宽度时会自动换行，适合展示不确定个数的元素，例如标签或图像集。

Wrap(
  spacing: 8.0, // 子组件之间的横向间距
  runSpacing: 4.0, // 行之间的纵向间距
  children: [/* 子组件 */],
)

4. Stack 与 Positioned

在 Stack 中，子组件可以通过 Positioned 设置其相对父容器的精确位置，适合用于构建自由定位的 UI。

Stack(
  children: [
    Positioned(
      top: 20,
      left: 10,
      child: Text('Positioned Text'),
    ),
  ],
)

5. AspectRatio

AspectRatio 组件用于根据比例设置子组件的宽高比，常用于图像或视频展示。

AspectRatio(
  aspectRatio: 16 / 9,
  child: Container(color: Colors.blue),
)

三、响应式布局组件

1. FractionallySizedBox

FractionallySizedBox 按父容器的百分比调整子组件的大小，常用于实现响应式布局。

FractionallySizedBox(
  widthFactor: 0.5, // 宽度为父容器的一半
  heightFactor: 0.3, // 高度为父容器的30%
  child: Container(color: Colors.blue),
)

2. IntrinsicWidth 和 IntrinsicHeight

这两个组件使子组件根据内容自适应大小，而不是受父容器的布局约束，适用于不规则的布局场景。

3. MediaQuery

MediaQuery 可以获取屏幕的尺寸、像素密度等信息，适用于实现不同设备上的响应式布局。

MediaQuery.of(context).size.width; // 获取屏幕的宽度

4. Spacer

Spacer 用于在 Row 或 Column 中自动填充剩余空间，帮助创建灵活的间距。

Row(
  children: [
    Text('Left'),
    Spacer(),
    Text('Right'),
  ],
)

四、动画与变换

1. Transform.translate

Transform.translate 组件用于在布局过程中对子组件进行平移。它不会改变子组件本身的大小或形状，而是通过位移改变其在屏幕上的位置。

Transform.translate(
  offset: Offset(10.0, 20.0), // x 轴移动 10，y 轴移动 20
  child: Container(width: 100, height: 100, color: Colors.red),
)

五、布局总结

在 Flutter 中，你可以通过组合使用上述布局组件，创建从简单到复杂的 UI 界面。以下几点可以帮助你更好地选择布局：

1. 线性布局：使用 Column 和 Row 进行简单的垂直或水平排列。
2. 弹性布局：使用 Expanded 和 Flexible 在 Row 或 Column 中按比例分配空间。
3. 叠层布局：使用 Stack 实现子组件的自由定位。
4. 流式布局：使用 Wrap 实现自动换行的布局。
5. 对齐和变换：使用 Align、Positioned 和 Transform 控制子组件的位置。

通过合理组合使用这些布局组件，你可以实现几乎任何类型的界面需求，同时保持界面的灵活性和响应性。