🔶 一、基础布局控件
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 |
