Flutter 布局 Widget 完全指南：从入门到精通

本文全面解析 Flutter 最常用的 15+ 布局 Widget，包含详细用法、代码示例和最佳实践。

一、单子布局 Widget（Single-child Layout）

1. Container - 多功能容器

Container(
  width: 200,
  height: 200,
  margin: EdgeInsets.all(16),      // 外边距
  padding: EdgeInsets.all(24),     // 内边距
  decoration: BoxDecoration(
    color: Colors.blue[100],
    borderRadius: BorderRadius.circular(20),
    gradient: LinearGradient(colors: [Colors.blue, Colors.purple]),
    boxShadow: [
      BoxShadow(
        color: Colors.black26,
        blurRadius: 10,
        offset: Offset(0, 5)
    ],
  ),
  child: Text(
    'Flutter',
    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
  ),
)

核心功能：

• 设置尺寸（width/height）
• 添加边距（margin/padding）
• 装饰效果（颜色/圆角/阴影/渐变）
• 子元素约束

2. Center - 居中布局

Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.star, size: 50, color: Colors.amber),
      SizedBox(height: 16),
      Text('居中内容'),
    ],
  ),
)

使用场景：

• 文字/图标居中
• 屏幕中央显示内容
• 简化对齐操作

3. Padding - 内边距控制

Padding(
  padding: EdgeInsets.only(
    left: 20,
    top: 10,
    right: 20,
    bottom: 30,
  ),
  child: TextField(
    decoration: InputDecoration(
      hintText: '输入内容',
      border: OutlineInputBorder(),
    ),
  ),
)

边距设置方式：

• EdgeInsets.all(20) - 统一设置
• EdgeInsets.symmetric(vertical: 10) - 对称设置
• EdgeInsets.only(top: 15) - 单边设置

4. Align - 精准定位

Align(
  alignment: Alignment(0.5, -0.5), // x轴50%, y轴-50%
  child: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

对齐参数：

• Alignment.topRight - 右上角
• Alignment.centerLeft - 左中
• Alignment.bottomCenter - 底部居中

二、多子布局 Widget（Multi-child Layout）

1. Row - 水平布局

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      flex: 1,
      child: ElevatedButton(onPressed: () {}, child: Text('按钮1')),
    ),
    Expanded(
      flex: 2,
      child: ElevatedButton(onPressed: () {}, child: Text('按钮2')),
    ),
  ],
)

关键属性：

• mainAxisAlignment：主轴对齐方式
• crossAxisAlignment：交叉轴对齐
• mainAxisSize：主轴尺寸约束

2. Column - 垂直布局

Column(
  children: [
    Text('个人信息', style: TextStyle(fontSize: 20)),
    Divider(thickness: 2),
    ListTile(title: Text('姓名: 张三')),
    ListTile(title: Text('年龄: 28')),
    ListTile(title: Text('城市: 北京')),
    Spacer(), // 占位空间
    ElevatedButton(onPressed: () {}, child: Text('保存')),
  ],
)

典型场景：

• 表单布局
• 设置菜单
• 垂直内容排列

3. Stack - 层叠布局

Stack(
  alignment: Alignment.center,
  children: [
    Image.network('https://picsum.photos/300/200'),
    Positioned(
      bottom: 20,
      child: Container(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        color: Colors.black54,
        child: Text('图片描述', style: TextStyle(color: Colors.white)),
      ),
    ),
    Positioned(
      top: 10,
      right: 10,
      child: IconButton(
        icon: Icon(Icons.favorite, color: Colors.red),
        onPressed: () {},
      ),
    ),
  ],
)

组合技巧：

• Positioned 精确定位
• Align 组件对齐
• Opacity 透明度控制

4. ListView - 滚动列表

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Card(
      elevation: 2,
      child: ListTile(
        leading: CircleAvatar(child: Text('${index + 1}')),
        title: Text('项目 $index'),
        subtitle: Text('详细信息...'),
        trailing: Icon(Icons.arrow_forward),
      ),
    );
  },
)

性能优化：

• 使用 builder 构造器实现懒加载
• 设置 itemExtent 提高滚动性能
• 配合 RefreshIndicator 实现下拉刷新

5. GridView - 网格布局

GridView.extent(
  maxCrossAxisExtent: 150, // 最大交叉轴尺寸
  crossAxisSpacing: 10,    // 列间距
  mainAxisSpacing: 15,     // 行间距
  children: List.generate(20, (index) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.primaries[index % Colors.primaries.length],
        borderRadius: BorderRadius.circular(12),
      ),
      child: Center(child: Text('Item $index')),
    );
  }),
)

布局方式：

• count - 固定列数
• extent - 固定单元格尺寸
• custom - 自定义布局

三、高级布局技巧

1. 响应式布局实现

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 800) {
      return DesktopLayout();
    } else if (constraints.maxWidth > 500) {
      return TabletLayout();
    } else {
      return MobileLayout();
    }
  },
)
class DesktopLayout extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        NavigationRail(width: 200),
        Expanded(child: ContentArea()),
        SidePanel(width: 300),
      ],
    );
  }
}

2. 嵌套布局实战

Scaffold(
  body: SafeArea(
    child: Column(
      children: [
        AppBar(title: Text('商品详情')),
        Expanded(
          child: SingleChildScrollView(
            child: Column(
              children: [
                ProductImageCarousel(),
                ProductInfoSection(),
                ProductSpecTable(),
                RelatedProductsGrid(),
              ],
            ),
          ),
        ),
        AddToCartFooter(),
      ],
    ),
  ),
)

四、布局最佳实践

1. 约束传递原则

子Widget应遵守父级的尺寸约束

2. 高效布局技巧

// ✅ 推荐：使用SizedBox替代Container设置固定尺寸
SizedBox(width: 100, height: 50, child: ...)
// ❌ 避免：不必要的布局嵌套
Center(
  child: Container(
    child: Center(
      child: Text('过度嵌套') // 冗余Center
    )
  )
)

3. 性能优化建议

• 使用 const 修饰静态组件
• 对长列表使用 ListView.builder
• 避免 Opacity 在动画中的过度使用

完整代码示例：Flutter Layout Examples GitHub
官方文档参考：Flutter Layout Widgets