Flutter 布局控件使用详解 - 指南

一、基础布局控件

1. Container：万能容器

Container(
width: 100,
height: 100,
padding: EdgeInsets.all(8),
margin: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: Text('Hello'),
)

• ✅ 用于设置尺寸、边距、内边距、背景、对齐、装饰。
• ⚠️ 如果只是设置颜色/间距/对齐，建议使用更轻量的控件。

2. Padding：内边距（比 Container 更轻）

Padding(
padding: EdgeInsets.all(16),
child: Text("有内边距的文本"),
)

3. Align / Center：对齐控件

Align(
alignment: Alignment.bottomRight,
child: Text("右下角"),
)
Center(
child: Text("居中"),
)

4. SizedBox：固定尺寸或间距

SizedBox(height: 20), // 用作间隔
SizedBox(width: 100, height: 50, child: Text("固定大小"))

二、线性布局控件（单方向）

1. Row：水平排列

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("左"),
Text("右"),
],
)

2. Column：垂直排列

Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("上"),
Text("下"),
],
)

3. Expanded & Flexible：撑满可用空间

Row(
children: [
Expanded(child: Text("占据剩余空间")),
Text("不变"),
],
)

三、层叠布局控件

1. Stack：层叠布局，子组件可重叠

Stack(
children: [
Container(width: 100, height: 100, color: Colors.red),
Positioned(
top: 10,
left: 10,
child: Text("叠在上面"),
),
],
)

四、列表类布局控件

1. ListView：滚动列表

ListView(
children: List.generate(10, (index) =>
Text("Item $index")),
)

2. GridView：网格布局

GridView.count(
crossAxisCount: 2,
children: List.generate(4, (index) =>
Text("格子 $index")),
)

五、约束 & 适配控件

1. ConstrainedBox / UnconstrainedBox

ConstrainedBox(
constraints: BoxConstraints(minWidth: 100, maxWidth: 200),
child: Text("有约束"),
)

2. FittedBox：缩放适配

FittedBox(
child: Text("文字很大"),
)

六、页面/区域布局控件

1. Scaffold：基本页面结构

Scaffold(
appBar: AppBar(title: Text("首页")),
body: Center(child: Text("内容")),
floatingActionButton: FloatingActionButton(onPressed: () {
})
)

2. SafeArea：避开系统 UI 区域（刘海/状态栏）

SafeArea(
child: Text("避开系统区域"),
)

七、弹性适配与媒体查询

1. MediaQuery：获取屏幕尺寸

double width = MediaQuery.of(context).size.width;

2. LayoutBuilder：按父布局约束适配

LayoutBuilder(
builder: (context, constraints) {
if (constraints.maxWidth >
600) {
return Text("大屏");
} else {
return Text("小屏");
}
},
)

实战建议：如何写出更优雅的布局

情况	推荐控件
加间距	Padding, SizedBox
固定大小	SizedBox, Container
居中	Center, Align
列表	ListView, Column
网格	GridView
多子组件层叠	Stack
复杂布局（主内容 + 边栏等）	Row + Expanded, Scaffold
动态适配	LayoutBuilder, MediaQuery

总结

分类	常用控件
单个控件	Container, Padding, Align, SizedBox
水平/垂直	Row, Column, Expanded, Flexible
叠加布局	Stack, Positioned
页面结构	Scaffold, SafeArea
滚动	ListView, GridView, SingleChildScrollView
适配	MediaQuery, LayoutBuilder, FittedBox