基础入门 Flutter for OpenHarmony：Container — 布局的万能容器

🎯欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
📦 本文将带你深入了解 Flutter 中最基础却最强大的布局组件------Container，掌握它就等于掌握了 Flutter 布局的一半。

---

一、Container 组件概述

在 Flutter 的组件体系中，Container 可以说是最基础也是最常用的组件之一。它就像一个万能的容器，可以包含一个子组件，并为其提供丰富的装饰和布局属性。无论是设置背景色、圆角、阴影，还是添加内边距、外边距，Container 都能轻松实现。

🎯 为什么 Container 如此重要？

Container 的重要性体现在以下几个方面：

• 视觉装饰 ：通过 decoration 属性，可以设置背景色、边框、圆角、阴影等各种视觉效果
• 尺寸控制 ：通过 width、height、constraints 等属性，精确控制组件的大小
• 位置调整 ：通过 padding、margin、alignment 等属性，灵活调整子组件的位置
• 变换效果 ：通过 transform 属性，实现旋转、缩放、平移等变换效果

💡 核心思想：Container 本身不包含任何复杂的布局逻辑，它的强大之处在于能够将各种视觉效果和布局属性组合在一起，形成一个完整的视觉单元。

---

二、基础属性详解

2.1 width 和 height

width 和 height 是最基础的尺寸属性，用于指定 Container 的宽度和高度。

Container(
  width: 200,
  height: 100,
  color: Colors.blue,
  child: const Text('固定尺寸'),
)

当同时设置 width 和 height 时，Container 会严格按照指定的尺寸显示。如果只设置其中一个，另一个维度会根据子组件的大小自适应。

⚠️ 注意 ：如果 Container 的父组件有约束（比如在 Expanded 中），设置的尺寸可能会被忽略。此时可以使用 unconstrainedBox 来解除约束。

2.2 padding 和 margin

padding 是内边距，控制子组件与 Container 边界的距离；margin 是外边距，控制 Container 与周围组件的距离。

Container(
  margin: const EdgeInsets.all(20),
  padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('带内边距和外边距的容器'),
)

EdgeInsets 提供了多种便捷方法来设置边距：

方法	说明	使用场景
all(16)	四周相同	统一的内边距或外边距
symmetric(horizontal: 16, vertical: 8)	水平和垂直不同	需要区分横向和纵向间距
only(left: 16, top: 8)	单独设置每一边	需要精确控制每一边的间距
fromLTRB(16, 8, 16, 8)	依次设置左上右下	需要完全自定义的情况

2.3 decoration

decoration 是 Container 最强大的属性，通过 BoxDecoration 可以实现丰富的视觉效果。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
    border: Border.all(color: Colors.blueAccent, width: 2),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 8,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: const Center(child: Text('装饰效果')),
)

---

三、BoxDecoration 详解

3.1 背景颜色 color

color 是最简单的背景设置，可以使用任何 Color 对象。

Container(
  width: 100,
  height: 100,
  decoration: const BoxDecoration(
    color: Colors.blue,
  ),
)

💡 小贴士 ：当同时使用 decoration 和 Container.color 时，decoration.color 会覆盖 Container.color。建议始终使用 decoration.color 来保持代码的一致性。

3.2 渐变背景 gradient

使用 gradient 可以创建渐变背景，包括线性渐变和径向渐变。

线性渐变 LinearGradient

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
)

LinearGradient 的 begin 和 end 参数控制渐变的方向，使用 Alignment 类可以方便地指定各个方向。

径向渐变 RadialGradient

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    gradient: RadialGradient(
      colors: [Colors.yellow, Colors.orange, Colors.red],
      radius: 0.8,
      center: const Alignment(0.5, 0.5),
    ),
  ),
)

径向渐变从中心向外扩散，常用于创建圆形的渐变效果，如按钮、头像等。

🎨 常用渐变方向对照

方向	Alignment 值	说明
从上到下	topCenter → bottomCenter	垂直渐变
从左到右	centerLeft → centerRight	水平渐变
对角线	topLeft → bottomRight	最常用的渐变方向
反向对角线	topRight → bottomLeft	交叉渐变

---

四、边框与圆角

4.1 圆角 borderRadius

borderRadius 可以为 Container 添加圆角效果，支持各种圆角组合。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(16),
  ),
)

BorderRadius 提供了多种创建圆角的方式：

// 统一圆角
BorderRadius.circular(16)

// 分别设置每个角
BorderRadius.only(
  topLeft: Radius.circular(16),
  topRight: Radius.circular(8),
  bottomLeft: Radius.circular(8),
  bottomRight: Radius.circular(16),
)

// 水平和垂直不同
BorderRadius.vertical(top: Radius.circular(16), bottom: Radius.circular(8))

不同的圆角组合可以创造出独特的视觉效果，如卡片、对话框等。

4.2 边框 border

border 可以为 Container 添加边框，支持单独设置每一边的样式。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(
      color: Colors.blue,
      width: 2,
      style: BorderStyle.solid,
    ),
    borderRadius: BorderRadius.circular(12),
  ),
)

也可以为每一边设置不同的边框：

decoration: BoxDecoration(
  border: Border(
    left: BorderSide(color: Colors.red, width: 4),
    right: BorderSide(color: Colors.blue, width: 4),
  ),
)

4.3 圆形容器

当 borderRadius 的半径等于 Container 宽度的一半时，可以创建一个完美的圆形容器。

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    gradient: const LinearGradient(
      colors: [Colors.pink, Colors.purple],
    ),
    borderRadius: BorderRadius.circular(50), // 宽度的一半
  ),
)

或者更简洁地使用 BoxShape.circle：

Container(
  width: 100,
  height: 100,
  decoration: const BoxDecoration(
    shape: BoxShape.circle,
    gradient: LinearGradient(
      colors: [Colors.pink, Colors.purple],
    ),
  ),
)

---

五、阴影效果

5.1 基础阴影

boxShadow 可以为 Container 添加阴影，增加立体感和层次感。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 10,
        offset: const Offset(0, 5),
      ),
    ],
  ),
)

BoxShadow 的参数说明：

参数	类型	说明	典型值
color	Color	阴影颜色	Colors.black.withOpacity(0.2)
blurRadius	double	模糊半径	8 - 20
offset	Offset	阴影偏移	Offset(0, 4)
spreadRadius	double	扩散半径	0 - 10

5.2 多重阴影

可以叠加多个阴影，创造出更丰富的视觉效果。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
      BoxShadow(
        color: Colors.black.withOpacity(0.05),
        blurRadius: 20,
        offset: const Offset(0, 10),
      ),
    ],
  ),
)

5.3 霓虹发光效果

通过调整阴影参数，可以创建霓虹发光效果。

Container(
  width: 200,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.purple,
    borderRadius: BorderRadius.circular(12),
    boxShadow: [
      BoxShadow(
        color: Colors.purple.withOpacity(0.6),
        blurRadius: 20,
        offset: Offset.zero,
      ),
      BoxShadow(
        color: Colors.purple.withOpacity(0.3),
        blurRadius: 40,
        offset: Offset.zero,
      ),
    ],
  ),
)

---

六、尺寸约束 constraints

6.1 BoxConstraints

constraints 可以更灵活地控制 Container 的尺寸，设置最小值、最大值等。

Container(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
    maxHeight: 150,
  ),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('约束尺寸'),
)

BoxConstraints 提供了多个便捷方法：

// 固定尺寸
BoxConstraints.tight(Size(200, 100))

// 宽松约束（子组件可以超出）
BoxConstraints.loose(Size(200, 100))

// 扩充（填满父组件）
BoxConstraints.expand()

// 仅限制最小尺寸
BoxConstraints(minWidth: 100, minHeight: 50)

6.2 响应式尺寸

使用 MediaQuery 可以根据屏幕尺寸动态调整 Container 的大小。

Container(
  width: MediaQuery.of(context).size.width * 0.8,
  height: MediaQuery.of(context).size.height * 0.2,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
)

💡 小贴士 ：对于复杂的响应式布局，建议使用 LayoutBuilder 来获取父组件的约束，而不是直接依赖 MediaQuery。

---

七、变换效果 transform

7.1 基础变换

transform 可以对 Container 进行旋转、缩放、平移等变换。

Container(
  width: 100,
  height: 100,
  transform: Matrix4.rotationZ(0.2),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
)

Matrix4 提供了多种变换方法：

方法	说明	参数
rotationZ(radians)	绕 Z 轴旋转	弧度值
rotationX(radians)	绕 X 轴旋转	弧度值
rotationY(radians)	绕 Y 轴旋转	弧度值
scale(s)	等比缩放	缩放比例
translationValues(x, y, z)	平移	X、Y、Z 轴偏移量

7.2 组合变换

可以将多个变换组合在一起。

Container(
  width: 100,
  height: 100,
  transform: Matrix4.identity()
    ..rotateZ(0.2)
    ..scale(1.2),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
)

7.3 对齐变换 origin

alignment 可以指定变换的原点位置。

Container(
  width: 100,
  height: 100,
  alignment: Alignment.topLeft,
  transform: Matrix4.rotationZ(0.2),
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
)

---

八、对齐方式 alignment

8.1 子组件对齐

alignment 控制子组件在 Container 内的对齐方式。

Container(
  width: 200,
  height: 100,
  alignment: Alignment.center,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('居中对齐'),
)

Alignment 提供了多个预定义的位置：

值	说明
Alignment.topLeft	左上角
Alignment.topCenter	顶部居中
Alignment.topRight	右上角
Alignment.centerLeft	左侧居中
Alignment.center	完全居中
Alignment.centerRight	右侧居中
Alignment.bottomLeft	左下角
Alignment.bottomCenter	底部居中
Alignment.bottomRight	右下角

8.2 精确对齐

可以使用 Alignment(x, y) 来精确指定对齐位置，x 和 y 的范围是 -1 到 1。

Container(
  width: 200,
  height: 100,
  alignment: const Alignment(0.5, 0.3), // x=0.5（偏右），y=0.3（偏上）
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('精确对齐'),
)

---

九、实际应用场景

9.1 卡片组件

Container(
  margin: const EdgeInsets.all(16),
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(16),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 12,
        offset: const Offset(0, 4),
      ),
    ],
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Text(
        '卡片标题',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
      ),
      const SizedBox(height: 8),
      Text(
        '这是卡片的内容区域。Container 通过装饰属性可以轻松创建漂亮的卡片效果。',
        style: TextStyle(color: Colors.grey[600]),
      ),
    ],
  ),
)

9.2 按钮

GestureDetector(
  onTap: () {
    // 点击事件
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
    decoration: BoxDecoration(
      gradient: const LinearGradient(
        colors: [Colors.blue, Colors.purple],
      ),
      borderRadius: BorderRadius.circular(12),
      boxShadow: [
        BoxShadow(
          color: Colors.blue.withOpacity(0.4),
          blurRadius: 12,
          offset: const Offset(0, 4),
        ),
      ],
    ),
    child: const Text(
      '点击我',
      style: TextStyle(
        color: Colors.white,
        fontSize: 16,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
)

9.3 头像

Container(
  width: 80,
  height: 80,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      color: Colors.white,
      width: 3,
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2),
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
    ],
    image: const DecorationImage(
      image: NetworkImage('https://picsum.photos/200/200'),
      fit: BoxFit.cover,
    ),
  ),
)

---

十、性能优化

10.1 避免不必要的 Container

虽然 Container 很强大，但过度使用会增加不必要的渲染层级。在简单场景下，可以考虑使用更轻量的组件。

// ❌ 不必要的 Container
Container(
  padding: const EdgeInsets.all(16),
  color: Colors.blue,
  child: const Text('Hello'),
)

// ✅ 使用 ColoredBox
ColoredBox(
  color: Colors.blue,
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: const Text('Hello'),
  ),
)

10.2 使用 const

对于不变的 Container，使用 const 修饰符可以避免重复构建。

const CardContainer = Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(12)),
  ),
);

10.3 合并装饰属性

将多个装饰属性合并到一个 Container 中，而不是嵌套多个 Container。

// ❌ 嵌套 Container
Container(
  padding: const EdgeInsets.all(16),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Text('Hello'),
  ),
)

// ✅ 合并属性
Container(
  padding: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(12),
  ),
  child: const Text('Hello'),
)

---

十一、完整示例代码

下面是一个完整的 Flutter 应用示例，展示 Container 组件的各种效果。

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Container 组件演示',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.dark(
          primary: const Color(0xFF6366F1),
          secondary: const Color(0xFF8B5CF6),
          surface: const Color(0xFF1E293B),
          background: const Color(0xFF0F172A),
          brightness: Brightness.dark,
        ),
        useMaterial3: true,
      ),
      home: const ContainerPage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF0F172A),
      body: SafeArea(
        child: SingleChildScrollView(
          padding: const EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 标题区域
              Container(
                padding: const EdgeInsets.all(24),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [
                      const Color(0xFF6366F1).withOpacity(0.2),
                      const Color(0xFF8B5CF6).withOpacity(0.2),
                    ],
                  ),
                  borderRadius: BorderRadius.circular(20),
                  border: Border.all(
                    color: Colors.white.withOpacity(0.1),
                  ),
                ),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      '📦 Container 组件',
                      style: TextStyle(
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                        letterSpacing: 0.5,
                      ),
                    ),
                    const SizedBox(height: 8),
                    Text(
                      '探索 Flutter 中万能容器组件的各种用法',
                      style: TextStyle(
                        fontSize: 14,
                        color: Colors.white.withOpacity(0.7),
                        height: 1.5,
                      ),
                    ),
                  ],
                ),
              ),

              const SizedBox(height: 32),

              // 基础颜色
              _buildSection(
                title: '基础颜色效果',
                icon: Icons.color_lens,
                color: Colors.blue,
                child: _buildContainerCard([
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildColorContainer('蓝色', Colors.blue),
                      _buildColorContainer('绿色', Colors.green),
                      _buildColorContainer('橙色', Colors.orange),
                      _buildColorContainer('紫色', Colors.purple),
                    ],
                  ),
                ]),
              ),

              const SizedBox(height: 24),

              // 渐变背景
              _buildSection(
                title: '渐变背景效果',
                icon: Icons.gradient,
                color: Colors.purple,
                child: _buildContainerCard([
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildGradientContainer('线性', _bluePurpleGradient),
                      _buildGradientContainer('径向', _yellowRedGradient),
                    ],
                  ),
                ]),
              ),

              const SizedBox(height: 24),

              // 圆角效果
              _buildSection(
                title: '圆角效果',
                icon: Icons.rounded_corner,
                color: Colors.green,
                child: _buildContainerCard([
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildRoundedContainer('4px', 4),
                      _buildRoundedContainer('12px', 12),
                      _buildRoundedContainer('24px', 24),
                      _buildCircularContainer('圆形'),
                    ],
                  ),
                ]),
              ),

              const SizedBox(height: 24),

              // 边框效果
              _buildSection(
                title: '边框效果',
                icon: Icons.border_outer,
                color: Colors.orange,
                child: _buildContainerCard([
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildBorderContainer('蓝色边框', Colors.blue),
                      _buildBorderContainer('红色边框', Colors.red),
                      _buildBorderContainer('虚线边框', Colors.green, dashed: true),
                    ],
                  ),
                ]),
              ),

              const SizedBox(height: 24),

              // 阴影效果
              _buildSection(
                title: '阴影效果',
                icon: Icons.layers,
                color: Colors.pink,
                child: _buildContainerCard([
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      _buildShadowContainer('轻度', 4, 2),
                      _buildShadowContainer('中度', 12, 6),
                      _buildShadowContainer('重度', 24, 12),
                      _buildGlowContainer('发光'),
                    ],
                  ),
                ]),
              ),

              const SizedBox(height: 24),

              // 实际应用
              _buildSection(
                title: '实际应用示例',
                icon: Icons.widgets,
                color: Colors.cyan,
                child: _buildContainerCard([
                  _buildCardExample(),
                  const SizedBox(height: 16),
                  _buildButtonExample(),
                ]),
              ),

              const SizedBox(height: 80),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildSection({
    required String title,
    required IconData icon,
    required Color color,
    required Widget child,
  }) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          children: [
            Container(
              padding: const EdgeInsets.all(8),
              decoration: BoxDecoration(
                color: color.withOpacity(0.2),
                borderRadius: BorderRadius.circular(10),
              ),
              child: Icon(icon, color: color, size: 20),
            ),
            const SizedBox(width: 12),
            Text(
              title,
              style: const TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.white,
              ),
            ),
          ],
        ),
        const SizedBox(height: 12),
        child,
      ],
    );
  }

  Widget _buildContainerCard(List<Widget> children) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.03),
        borderRadius: BorderRadius.circular(16),
        border: Border.all(
          color: Colors.white.withOpacity(0.05),
        ),
      ),
      child: Column(
        children: children,
      ),
    );
  }

  Widget _buildColorContainer(String label, Color color) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: color,
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildGradientContainer(String label, Gradient gradient) {
    return Column(
      children: [
        Container(
          width: 80,
          height: 70,
          decoration: BoxDecoration(
            gradient: gradient,
            borderRadius: BorderRadius.circular(12),
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  LinearGradient get _bluePurpleGradient => const LinearGradient(
        colors: [Color(0xFF6366F1), Color(0xFF8B5CF6)],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      );

  RadialGradient get _yellowRedGradient => RadialGradient(
        colors: [
          const Color(0xFFF59E0B),
          const Color(0xFFEF4444),
        ],
        radius: 0.8,
      );

  Widget _buildRoundedContainer(String label, double radius) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(radius),
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildCircularContainer(String label) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.green,
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildBorderContainer(String label, Color color, {bool dashed = false}) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: color.withOpacity(0.1),
            borderRadius: BorderRadius.circular(12),
            border: Border.all(
              color: color,
              width: 2,
              style: dashed ? BorderStyle.solid : BorderStyle.solid,
            ),
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildShadowContainer(String label, double blur, double offset) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: Colors.pink,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.3),
                blurRadius: blur,
                offset: Offset(0, offset),
              ),
            ],
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildGlowContainer(String label) {
    return Column(
      children: [
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: Colors.pink,
            borderRadius: BorderRadius.circular(12),
            boxShadow: [
              BoxShadow(
                color: Colors.pink.withOpacity(0.6),
                blurRadius: 20,
                offset: Offset.zero,
              ),
            ],
          ),
        ),
        const SizedBox(height: 8),
        Text(
          label,
          style: TextStyle(
            fontSize: 12,
            color: Colors.white.withOpacity(0.7),
          ),
        ),
      ],
    );
  }

  Widget _buildCardExample() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        gradient: const LinearGradient(
          colors: [Color(0xFF6366F1), Color(0xFF8B5CF6)],
        ),
        borderRadius: BorderRadius.circular(16),
        boxShadow: [
          BoxShadow(
            color: const Color(0xFF6366F1).withOpacity(0.4),
            blurRadius: 20,
            offset: const Offset(0, 8),
          ),
        ],
      ),
      child: const Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '卡片示例',
            style: TextStyle(
              fontSize: 18,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
          SizedBox(height: 8),
          Text(
            '这是一个使用 Container 创建的精美卡片组件',
            style: TextStyle(
              fontSize: 14,
              color: Colors.white70,
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildButtonExample() {
    return Center(
      child: GestureDetector(
        onTap: () {},
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 48, vertical: 16),
          decoration: BoxDecoration(
            gradient: const LinearGradient(
              colors: [Color(0xFF10B981), Color(0xFF06B6D4)],
            ),
            borderRadius: BorderRadius.circular(30),
            boxShadow: [
              BoxShadow(
                color: const Color(0xFF10B981).withOpacity(0.4),
                blurRadius: 16,
                offset: const Offset(0, 6),
              ),
            ],
          ),
          child: const Text(
            '按钮示例',
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ),
      ),
    );
  }
}

---

十二、总结

Container 是 Flutter 中最基础也最重要的组件之一，掌握它的各种属性和用法对于构建美观的界面至关重要。

🎯 核心要点

• decoration 是 Container 最强大的属性，通过 BoxDecoration 可以实现丰富的视觉效果
• padding 和 margin 分别控制内边距和外边距，合理使用可以创建良好的间距
• borderRadius 可以创建从轻微圆角到完全圆形的各种形状
• boxShadow 可以增加立体感和层次感，是提升视觉效果的关键
• gradient 可以创建渐变背景，让界面更加生动
• transform 可以实现旋转、缩放等变换效果
• constraints 可以灵活控制尺寸，实现响应式布局

📚 使用建议

场景	推荐属性组合
卡片	padding + decoration (color/radius/shadow)
按钮	padding + decoration (gradient/radius/shadow) + alignment
头像	shape: circle + border + image
分隔线	height + color/decoration
背景容器	decoration (gradient) + constraints

💡 最佳实践：Container 应该作为一个独立的视觉单元使用，将相关的装饰和布局属性组合在一起，而不是作为简单的包装组件。合理使用 Container，可以让代码更加清晰，界面更加美观。