Flutter开发指南

Appearance

Container ​

Container 是 Flutter 中最常用的组合容器，它将 Padding、BoxDecoration、Alignment、Constraints 等多种功能组合在一起。

构造函数 ​

dart
Container({
  Key? key,                                              // 组件标识
  AlignmentGeometry? alignment,                           // 子组件对齐方式（当 Container 比子组件大时生效）
  EdgeInsetsGeometry? padding,                            // 内边距（Container 边缘与 child 之间的间距）
  Color? color,                                           // 背景色（与 decoration 不能同时使用）
  Decoration? decoration,                                 // 装饰（边框、渐变、圆角、阴影等，与 color 不能同时使用）
  Decoration? foregroundDecoration,                       // 前景装饰（绘制在子组件之上）
  double? width,                                          // 宽度
  double? height,                                         // 高度
  BoxConstraints? constraints,                            // 额外约束（最小/最大宽高限制）
  EdgeInsetsGeometry? margin,                             // 外边距（Container 与外部组件的间距）
  Matrix4? transform,                                    // 变换矩阵（旋转、缩放、平移等）
  AlignmentGeometry? transformAlignment,                  // 变换原点对齐方式
  Widget? child,                                          // 子组件
  Clip clipBehavior = Clip.none,                          // 裁剪行为（超出部分是否裁剪）
})

属性速查 ​

属性类型说明
alignmentAlignmentGeometry?子组件对齐方式
paddingEdgeInsetsGeometry?内边距
colorColor?背景色（与 decoration 互斥）
decorationDecoration?装饰（与 color 互斥）
foregroundDecorationDecoration?前景装饰
widthdouble?宽度
heightdouble?高度
constraintsBoxConstraints?额外约束
marginEdgeInsetsGeometry?外边距
transformMatrix4?变换矩阵
transformAlignmentAlignmentGeometry?变换原点
childWidget?子组件
clipBehaviorClip?裁剪行为

常用值速查 ​

alignment — 对齐值 ​

值位置
Alignment.topLeft左上
Alignment.topCenter上中
Alignment.topRight右上
Alignment.center正中
Alignment.centerLeft左中
Alignment.centerRight右中
Alignment.bottomLeft左下
Alignment.bottomCenter下中
Alignment.bottomRight右下
Alignment(0, 0)中心（等价于 center）
Alignment(-1, -1)左上角
Alignment(1, 1)右下角

decoration — BoxDecoration 常用属性 ​

属性说明
color背景色
borderRadius圆角
border边框
boxShadow阴影
gradient渐变
shape形状（rectangle / circle）
image背景图片

constraints — BoxConstraints 常用方法 ​

方法说明
BoxConstraints(minWidth, maxWidth, minHeight, maxHeight)自定义约束
BoxConstraints.tight(Size(200, 100))固定 200x100
BoxConstraints.loose(Size(200, 200))最大 200x200
BoxConstraints.expand()尽可能大

transform — Matrix4 常用方法 ​

方法说明
Matrix4.rotationZ(0.1)旋转（弧度）
Matrix4.translationValues(10, 10, 0)平移
Matrix4.diagonal3Values(1.5, 1.5, 1)缩放

快速示例 ​

以下示例都需要在文件顶部添加 import 'package:flutter/material.dart';

基本卡片 ​

dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Container 卡片示例')),
      // ─── ★ Container 组合容器 ──────────────
      body: Container(
        width: double.infinity,
        margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        padding: const EdgeInsets.all(16),
        // ─── ★ BoxDecoration 装饰 ──────────────
        decoration: BoxDecoration(
          gradient: const LinearGradient(
            colors: [Colors.blue, Colors.indigo],
          ),
          borderRadius: BorderRadius.circular(12),
          boxShadow: [
            BoxShadow(
              color: Colors.blue.withOpacity(0.3),
              blurRadius: 12,
              offset: const Offset(0, 4),
            ),
          ],
        ),
        // ─── ☆ BoxDecoration 装饰 ──────────────
        child: const Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Flutter 卡片',
              style: TextStyle(
                color: Colors.white,
                fontSize: 18,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text(
              'Container 是最常用的组合容器',
              style: TextStyle(color: Colors.white70),
            ),
          ],
        ),
      ),
      // ─── ☆ Container 组合容器 ──────────────
    );
  }
}

内边距 + 背景色 ​

dart
Container(
  padding: const EdgeInsets.all(16),
  color: Colors.blue,
  child: const Text('有内边距'),
)

外边距 ​

dart
Container(
  margin: const EdgeInsets.all(20),   // 与其他组件保持 20 的间距
  color: Colors.blue,
  child: const Text('有外边距'),
)

完整装饰 ​

dart
Container(
  decoration: BoxDecoration(
    color: Colors.white,                  // 背景色
    borderRadius: BorderRadius.circular(12), // 圆角
    border: Border.all(                   // 边框
      color: Colors.grey.withOpacity(0.3),
      width: 1,
    ),
    boxShadow: [                          // 阴影
      BoxShadow(
        color: Colors.black.withOpacity(0.1),
        blurRadius: 10,
        offset: const Offset(0, 4),
      ),
    ],
    gradient: LinearGradient(             // 渐变
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: const Text('带装饰的容器'),
)

color 和 decoration 不能同时使用。如果需要背景色+装饰，把颜色写在 BoxDecoration.color 中。

约束 ​

dart
Container(
  constraints: const BoxConstraints(
    minWidth: 100,
    maxWidth: 200,
    minHeight: 50,
    maxHeight: 150,
  ),
  color: Colors.blue,
  child: const Text('约束范围'),
)

变换 ​

dart
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Container 变换示例')),
      body: Center(
        child: Container(
          // ─── ★ transform 变换 ──────────────
          transform: Matrix4.rotationZ(0.1),
          // ─── ☆ transform 变换 ──────────────
          padding: const EdgeInsets.all(16),
          color: Colors.blue,
          child: const Text('变换', style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

尺寸规则速查 ​

条件行为
无 child + 无 width/height/constraints尽可能小（0x0）
无 child + 有 width/height使用指定尺寸
有 child + 无 constraints尺寸适配 child
有 child + 有 alignment尝试撑满父组件，child 按对齐定位
有 child + 无 alignment尺寸适配 child

与 AnimatedContainer 的区别 ​

AnimatedContainer 是 Container 的动画版本，当属性变化时会自动过渡动画：

dart
AnimatedContainer({
  Key? key,                                              // 组件标识
  AlignmentGeometry? alignment,                           // 子组件对齐方式
  EdgeInsetsGeometry? padding,                            // 内边距
  Color? color,                                           // 背景色
  Decoration? decoration,                                 // 装饰
  Decoration? foregroundDecoration,                       // 前景装饰
  double? width,                                          // 宽度
  double? height,                                         // 高度
  BoxConstraints? constraints,                            // 额外约束
  EdgeInsetsGeometry? margin,                             // 外边距
  Matrix4? transform,                                    // 变换矩阵
  AlignmentGeometry? transformAlignment,                  // 变换原点对齐
  Widget? child,                                          // 子组件
  Curve curve = Curves.linear,                            // 动画曲线
  required Duration duration,                             // 动画时长（必填）
  VoidCallback? onEnd,                                  // 动画结束回调
})
dart
import 'package:flutter/material.dart';

class AnimatedContainerExample extends StatefulWidget {
  const AnimatedContainerExample({super.key});

  @override
  State<AnimatedContainerExample> createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  bool _expanded = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('AnimatedContainer')),
      body: Center(
        child: GestureDetector(
          onTap: () => setState(() => _expanded = !_expanded),
          // ─── ★ AnimatedContainer ──────────────
          child: AnimatedContainer(
            duration: const Duration(milliseconds: 300),
            width: _expanded ? 200 : 100,
            height: _expanded ? 200 : 100,
            color: _expanded ? Colors.blue : Colors.red,
            curve: Curves.easeInOut,
            alignment: Alignment.center,
            child: const Text('动画容器', style: TextStyle(color: Colors.white)),
          ),
          // ─── ☆ AnimatedContainer ──────────────
        ),
      ),
    );
  }
}

基于 Flutter 官方文档整理

MIT License