[Flutter 基础] - Flutter核心布局组件 - Container-打造你想要的样子

在 Flutter 中，Container 是一个多功能且常用的布局和装饰组件。它可以设置尺寸、背景、边距、对齐方式等属性，甚至可以添加装饰效果（如圆角、边框、阴影）或进行 2D/3D 变换。 这篇文章主要是通过一些示例来了解一下Container 的基本用法：

---

一、基本概念

Container 是一个组合了多个基础功能的容器组件，内部封装了以下特性：

• 尺寸控制（width, height）
• 边距（margin）
• 内边距（padding）
• 背景与装饰（color, decoration）
• 对齐方式（alignment）
• 子组件（child）
• 变换（transform）

---

二、构造函数参数详解

Container({
  Key? key,
  AlignmentGeometry? alignment, // 子组件对齐方式
  EdgeInsetsGeometry? padding,  // 内边距
  Color? color,                 // 背景色（与 decoration 互斥）
  Decoration? decoration,       // 装饰（背景、边框、圆角等）
  Decoration? foregroundDecoration, // 前景装饰
  double? width,                // 宽度
  double? height,               // 高度
  BoxConstraints? constraints,  // 布局约束（优先级高于 width/height）
  EdgeInsetsGeometry? margin,   // 外边距
  Matrix4? transform,           // 变换矩阵（如旋转、平移）
  AlignmentGeometry? transformAlignment,
  Widget? child,                // 子组件
  Clip clipBehavior = Clip.none, //
})

---

三、常用场景及示例

1. 基础用法：设置颜色和尺寸

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text("Hello Container"),
)

2. 边距和内边距

Container(
  margin: EdgeInsets.all(20), // 外边距 20
  padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), // 内边距,还可以通过EdgeInsets.only(top:1,right:2,bottom:3,left:4)
  color: Colors.green,
  child: Text("Margin & Padding"),
)

3. 装饰（decoration 属性）

通过 BoxDecoration 实现复杂装饰效果：

Container(
    alignment: Alignment.center,
    width: 150,
    height: 48,
    decoration: BoxDecoration(
        color: Colors.red,
        borderRadius: BorderRadius.circular(10),
        // 圆角
        border: Border.all(color: Colors.black, width: 2),
        // 边框
        boxShadow: [
          BoxShadow(color: Colors.grey, blurRadius: 5, offset: Offset(2, 2)),
        ],
    ),
    child: Text("Decorated Container", style: TextStyle(color: Colors.white),),
),

4. 形状控制（圆形或圆角）

// 圆形
Container(
    alignment: Alignment.center,
    width: 150,
    height: 150,
    decoration: BoxDecoration(
        color: Colors.purple,
        shape: BoxShape.circle, // 圆形
    ),
    child: Text("Decorated Container", style: TextStyle(color: Colors.white),),
),
​
// 圆角矩形
Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
  // ...
)

5. 对齐子组件

Container(
  alignment: Alignment.centerRight, // 子组件右对齐
  width: 200,
  height: 50,
  color: Colors.orange,
  child: Text("Right-aligned"),
)

6. 变换（旋转、平移）

Container(
  transform: Matrix4.rotationZ(0.1), // 旋转 0.1 弧度
  // transform: Matrix4.translationValues(50, 0, 0), // 平移
  child: Text("Transformed Container"),
)

7. 约束（constraints）

通过 BoxConstraints 设置最小/最大宽高：

Container(
  constraints: BoxConstraints(
    minWidth: 100,
    maxWidth: 300,
    minHeight: 50,
  ),
  child: Text("Constrained Container"),
)

---

四、注意事项

0. color 与 decoration 的冲突 如果同时设置 color 和 decoration，会抛出错误。应在 decoration 中使用 color：

   Container(
     decoration: BoxDecoration(color: Colors.blue), // 正确
     // color: Colors.blue, // 错误！
   )
   

1. 默认尺寸行为

   • 如果 Container 没有子组件（child 为 null），且没有设置 width/height/constraints，它会尽可能大。
   • 如果有子组件，默认会适应子组件的大小。

2. 布局优先级 constraints 的优先级高于 width 和 height。

---

五、总结

Container 是 Flutter 中最灵活的布局组件之一，适用于以下场景：

• 包裹子组件并添加背景、边距等样式。
• 实现圆角、阴影、边框等装饰效果。
• 通过 transform 进行简单的 2D 变换。
• 快速设置组件尺寸和位置。

通过组合不同的属性，灵活的运用不同的组合可以实现复杂的 UI 效果。