在 Flutter 3 中，容器组件是用于布局、装饰或约束子组件的核心部件，能让程序更加美观，如何学习呢，能快速的应用起来，下面通过例子，来快速理解各种容器组件的使用方法。

一程序界面

二 代码实现

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 容器组件示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ContainerDemoScreen(),
    );
  }
}

class ContainerDemoScreen extends StatelessWidget {
  const ContainerDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('容器组件示例')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(20),
        child: Column(
          children: [
            // 1. Container 示例
            _buildContainerDemo(),
            const SizedBox(height: 20),

            // 2. Row/Column 示例
            _buildRowColumnDemo(),
            const SizedBox(height: 20),

            // 3. Stack 示例
            _buildStackDemo(),
            const SizedBox(height: 20),

            // 4. ListView/GridView 示例
            _buildListAndGridDemo(),
            const SizedBox(height: 20),

            // 5. Expanded/Flexible 示例
            _buildExpandedDemo(),
            const SizedBox(height: 20),

            // 6. Card 示例
            _buildCardDemo(),
          ],
        ),
      ),
    );
  }

  // ---------- 以下是各个容器的构建方法 ----------

  // 1. Container 示例
  Widget _buildContainerDemo() {
    return Container(
      width: 200,
      height: 100,
      margin: const EdgeInsets.all(10),
      padding: const EdgeInsets.all(15),
      decoration: BoxDecoration(
        color: Colors.blue[100],
        borderRadius: BorderRadius.circular(10),
        border: Border.all(color: Colors.blue, width: 2),
      ),
      child: const Center(
        child: Text('Container', style: TextStyle(color: Colors.blue)),
      ),
    );
  }

  // 2. Row/Column 示例
  Widget _buildRowColumnDemo() {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Container(width: 50, height: 50, color: Colors.red),
            Container(width: 50, height: 50, color: Colors.green),
            Container(width: 50, height: 50, color: Colors.blue),
          ],
        ),
        const SizedBox(height: 10),
        Column(
          children: const [
            Text('Row 水平排列'),
            Text('Column 垂直排列'),
          ],
        ),
      ],
    );
  }

  // 3. Stack 示例
  Widget _buildStackDemo() {
    return SizedBox(
      width: 200,
      height: 100,
      child: Stack(
        children: [
          Container(color: Colors.yellow[100]),
          Positioned(
            top: 10,
            left: 10,
            child: Container(width: 40, height: 40, color: Colors.red),
          ),
          const Positioned(
            bottom: 10,
            right: 10,
            child: Text('Stack 层叠'),
          ),
        ],
      ),
    );
  }

  // 4. ListView/GridView 示例
  Widget _buildListAndGridDemo() {
    return Column(
      children: [
        SizedBox(
          height: 100,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: List.generate(
              5,
              (index) => Container(
                width: 80,
                margin: const EdgeInsets.all(5),
                color: Colors.orange[100],
                child: Center(child: Text('Item $index')),
              ),
            ),
          ),
        ),
        const SizedBox(height: 10),
        GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: 3,
          children: List.generate(
            6,
            (index) => Container(
              margin: const EdgeInsets.all(2),
              color: Colors.purple[100],
              child: Center(child: Text('Grid $index')),
            ),
          ),
        ),
      ],
    );
  }

  // 5. Expanded/Flexible 示例
  Widget _buildExpandedDemo() {
    return Container(
      height: 80,
      color: Colors.grey[200],
      child: Row(
        children: [
          Expanded(
            flex: 2,
            child: Container(color: Colors.red, child: const Center(child: Text('Expanded'))),
          ),
          Flexible(
            flex: 1,
            child: Container(color: Colors.blue, child: const Center(child: Text('Flexible'))),
          ),
        ],
      ),
    );
  }

  // 6. Card 示例
  Widget _buildCardDemo() {
    return Card(
      elevation: 5,
      color: Colors.white,
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: const [
            Icon(Icons.star, color: Colors.amber, size: 40),
            SizedBox(height: 10),
            Text('Card 组件示例', style: TextStyle(fontWeight: FontWeight.bold)),
            Text('带阴影的卡片式布局'),
          ],
        ),
      ),
    );
  }
}

三 代码讲解

运行效果

这个示例会展示以下内容：

1. 蓝色圆角 Container
2. 红绿蓝方块水平排列的 Row
3. 黄色背景叠加红色方块和文字的 Stack
4. 水平滚动 ListView 和 3列 GridView
5. 红蓝比例分割的 Expanded/Flexible
6. 带阴影的 Card 卡片

核心容器组件讲解

1. Container

• 用途：全能布局容器，可设置尺寸、边距、颜色等。
• 关键属性：
• margin // 外边距 padding // 内边距 decoration // 装饰（颜色、边框、圆角等）

2. Row 与 Column

• 用途：水平/垂直排列子组件。
• 关键属性：
• mainAxisAlignment // 主轴对齐方式（如居中、两端对齐） crossAxisAlignment // 交叉轴对齐方式

3. Stack

• 用途：层叠布局，结合 Positioned 控制子组件位置。
• 典型场景：图标+文字叠加、浮动按钮。

4. ListView 与 GridView

• 用途：滚动列表和网格布局。
• 注意：
• shrinkWrap: true // 当嵌套在其他滚动组件中时需要设置 scrollDirection // 滚动方向（水平/垂直）

5. Expanded 与 Flexible

• 用途：在 Row/Column 中按比例分配剩余空间。
• 区别：Expanded 必须填满剩余空间Flexible 可以自适应内容大小

6. Card

• 用途：带阴影的卡片式设计。
• 关键属性：
• elevation // 阴影强度 shape // 自定义形状（如圆角半径）

如何调试？

1. 复制代码到 lib/main.dart
2. 运行 flutter run
3. 尝试修改以下参数观察变化：修改 Container 的 margin 和 padding调整 Row 的 mainAxisAlignment改变 Expanded 的 flex 比例

通过这个示例，你可以直观理解 Flutter 容器组件如何协作构建复杂界面。如果需要更高级的布局，可以学习 LayoutBuilder 或 CustomScrollView。