Tutorials

Flutter 页面布局入门：新手必须掌握的核心布局方式

,

在 Flutter 中，页面布局是新手最容易困惑、但也是最重要的基础之一。
如果你已经成功运行了第一个 Flutter 应用，那么下一步，就是学会如何把页面内容正确地摆放出来。

本文将用尽量直观、易理解的方式，带你掌握 Flutter 页面布局的核心思想。

一、Flutter 布局的核心思想：一切都是 Widget

在 Flutter 中：

  • 页面是 Widget
  • 文本是 Widget
  • 按钮是 Widget
  • 布局方式本身也是 Widget

布局的本质，就是 Widget 的嵌套组合。
你不是在“画页面”，而是在“组合 Widget”。

二、最基础的布局组件：Row 和 Column

1. Column：纵向布局（最常用）

Column 用于从上到下排列组件。

1
2
3
4
5
6
7
8
9
10
Column(
  children: [
    Text('标题'),
    Text('内容'),
    ElevatedButton(
      onPressed: () {},
      child: Text('按钮'),
    ),
  ],
)

组件会按顺序垂直排列。

2. Row：横向布局

Row 用于从左到右排列组件。

1
2
3
4
5
6
7
Row(
  children: [
    Icon(Icons.star),
    Text('评分'),
    Text('5.0'),
  ],
)

常见使用场景包括：

  • 图标 + 文本
  • 按钮并排
  • 列表项左右结构

三、主轴与交叉轴（理解一次，长期受用）

这是 Flutter 布局中非常重要的概念。

以 Column 为例：

  • 主轴（Main Axis）：垂直方向
  • 交叉轴（Cross Axis）：水平方向

常用属性示例：

1
2
3
4
5
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [],
)

常见取值说明：

  • MainAxisAlignment.start：从顶部开始
  • MainAxisAlignment.center：居中
  • MainAxisAlignment.spaceBetween：两端对齐

四、让布局自动伸缩：Expanded 和 Flexible

1. Expanded：占满剩余空间

1
2
3
4
5
6
7
8
9
10
Row(
  children: [
    Expanded(
      child: Container(color: Colors.red),
    ),
    Expanded(
      child: Container(color: Colors.blue),
    ),
  ],
)

两个组件会自动平分可用宽度。

2. 不使用 Expanded 的情况

1
2
3
4
5
6
Row(
  children: [
    Container(width: 100, color: Colors.red),
    Container(width: 100, color: Colors.blue),
  ],
)

这种写法宽度固定，不会适配屏幕大小。

五、Padding 与 SizedBox：控制间距的正确方式

Flutter 没有直接的 margin 属性，间距主要通过以下方式实现。

1. Padding：内边距

1
2
3
4
Padding(
  padding: EdgeInsets.all(16),
  child: Text('带内边距的文本'),
)

2. SizedBox：占位间隔

1
2
3
4
5
6
7
Column(
  children: [
    Text('上方内容'),
    SizedBox(height: 20),
    Text('下方内容'),
  ],
)

六、Container：新手最常用的万能组件

Container 可以同时设置：

  • 背景色
  • 宽高
  • 内边距
  • 边框
1
2
3
4
5
Container(
  padding: EdgeInsets.all(12),
  color: Colors.grey,
  child: Text('内容区域'),
)

新手阶段，大多数布局都可以先用 Container 包一层。

七、Center 与 Align：快速对齐组件

1. Center：完全居中

1
2
3
Center(
  child: Text('居中显示'),
)

2. Align：自定义位置

1
2
3
4
Align(
  alignment: Alignment.topRight,
  child: Text('右上角'),
)

八、一个完整的页面布局示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
Scaffold(
  appBar: AppBar(title: Text('Flutter 布局示例')),
  body: Padding(
    padding: EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '标题',
          style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 12),
        Text('这里是内容说明文本。'),
        SizedBox(height: 20),
        Row(
          children: [
            Expanded(
              child: ElevatedButton(
                onPressed: () {},
                child: Text('确认'),
              ),
            ),
            SizedBox(width: 12),
            Expanded(
              child: OutlinedButton(
                onPressed: () {},
                child: Text('取消'),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

九、新手常见布局错误

1. Row / Column 内容溢出

解决方式：

  • 使用 Expanded
  • 使用 SingleChildScrollView

2. Container 嵌套过多

建议：

  • 布局使用 Row / Column
  • 样式再用 Container

3. 所有代码写在一个 Widget 中

建议：

  • 拆分小组件
  • 提高可读性与维护性

十、总结

Flutter 页面布局的关键在于三点：

  1. 一切都是 Widget
  2. Row / Column 是核心
  3. Expanded + Padding 决定布局质量

掌握这些基础组件，你已经可以构建结构清晰、适配良好的页面。

下一步学习建议

  • Flutter 列表布局（ListView / GridView）
  • Flutter 页面跳转与导航
  • Flutter 状态管理入门
  • Flutter 页面组件拆分技巧
Share