Flutter 布局控件使用详解

🔶 一、基础布局控件

1. Container：万能容器

dart 复制代码

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 更轻）

dart 复制代码

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

3. Align / Center：对齐控件

dart 复制代码

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

Center(
  child: Text("居中"),
)

4. SizedBox：固定尺寸或间距

dart 复制代码

SizedBox(height: 20), // 用作间隔

SizedBox(width: 100, height: 50, child: Text("固定大小"))

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

1. Row：水平排列

dart 复制代码

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

2. Column：垂直排列

dart 复制代码

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

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

dart 复制代码

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

🔶 三、层叠布局控件

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

dart 复制代码

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

🔷 四、列表类布局控件

1. ListView：滚动列表

dart 复制代码

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

2. GridView：网格布局

dart 复制代码

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

🔶 五、约束 & 适配控件

1. ConstrainedBox / UnconstrainedBox

dart 复制代码

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

2. FittedBox：缩放适配

dart 复制代码

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

🔷 六、页面/区域布局控件

1. Scaffold：基本页面结构

dart 复制代码

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

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

dart 复制代码

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

🔶 七、弹性适配与媒体查询

1. MediaQuery：获取屏幕尺寸

dart 复制代码

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

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

dart 复制代码

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