Container
Container 是 Flutter 中最常用的布局组件之一
参数
| 参数名称 | 类型 | 描述 |
|---|---|---|
| alignment | AlignmentGeometry | 定义子组件在其内部的对齐方式，默认为 null，即不改变子组件的位置。 |
| padding | EdgeInsetsGeometry | 内边距，用于在子组件周围添加空间。 |
| color | Color | 设置容器的背景颜色。如果设置了 decoration，则此属性会被忽略。 |
| decoration | Decoration | 用于绘制容器的装饰（如背景、边框等）。不能与 foregroundDecoration 和 color 同时使用。 |
| foregroundDecoration | Decoration | 在子组件之上绘制的装饰。 |
| width | double | 设置容器的宽度。 |
| height | double | 设置容器的高度。 |
| constraints | BoxConstraints | 对容器尺寸施加约束条件。 |
| margin | EdgeInsetsGeometry | 外边距，用于在容器与其他组件之间添加空间。 |
| transform | Matrix4 | 应用到容器的变换矩阵，例如旋转、缩放或平移。 |
| transformAlignment | AlignmentGeometry | 指定变换的原点相对于容器的对齐方式，默认为中心。 |
| child | Widget | 容器中包含的子组件。 |
| clipBehavior | Clip | 控制是否以及如何裁剪超出容器边界的内容，默认值为 Clip.none。 |
| constraints | BoxConstraints | 限制容器大小的最大最小宽高，当与 width 或 height 一起使用时，这些值会覆盖约束中的相应部分。 |
Decoration 属性
Decoration是用来修饰container的组件的抽象类，我们可以使用他的实现类对container进行修饰
1. BoxDecoration
BoxDecoration 是最常用的一种装饰类型，它可以组合多种视觉元素来定制容器的外观。以下是 BoxDecoration 支持的主要属性：
- color (
Color)：设置容器的纯色背景。 - gradient (
Gradient)：使用线性或径向渐变作为背景。 - image (
DecorationImage)：用图片填充背景，支持调整图像的适应方式（如平铺、缩放等）。 - border (
BoxBorder)：定义容器的边框样式，包括宽度、颜色和圆角。 - borderRadius (
BorderRadiusGeometry)：设置边框的圆角半径。 - boxShadow (
List<BoxShadow>)：添加一个或多个阴影效果到容器。 - shape (
BoxShape)：定义容器的形状，默认是矩形，也可以设置为圆形。
示例代码：
Container(
decoration: BoxDecoration(
color: Colors.blue, // 背景颜色
gradient: LinearGradient(colors: [Colors.red, Colors.blue]), // 渐变背景
image: DecorationImage(image: NetworkImage('URL'), fit: BoxFit.cover), // 图片背景
border: Border.all(color: Colors.black, width: 2.0), // 边框
borderRadius: BorderRadius.circular(12.0), // 圆角边框
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 阴影位置
),
],
),
)
2. ShapeDecoration
ShapeDecoration 可以用来绘制具有特定形状的背景。它通常与 ShapeBorder 结合使用，比如 CircleBorder 或 RoundedRectangleBorder，以创建圆形或圆角矩形等形状。
示例代码：
Container(
decoration: ShapeDecoration(
color: Colors.green,
shape: CircleBorder(), // 创建圆形背景
),
)
3. Gradient
虽然 Gradient 主要用于 BoxDecoration 中，但它本身也是一个独立的装饰类型，可以直接应用于其他需要渐变效果的地方。Flutter 提供了两种类型的渐变：
- LinearGradient：线性渐变，沿直线方向变化颜色。
- RadialGradient：径向渐变，从中心向外扩散变化颜色。
示例代码
class CompentPage extends StatefulWidget {
const CompentPage({super.key});
_CompentPageState createState() => _CompentPageState();
}
class _CompentPageState extends State<CompentPage> {
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center, //子组件在其内部的对齐方式
padding: const EdgeInsets.all(10), // 内边距
// color: Colors.white, // 背景颜色
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: Colors.red, width: 2),
borderRadius: BorderRadius.circular(10)),
width: 200, // 宽度
height: 200, // 高度
constraints: const BoxConstraints(maxHeight: 200), // 限制组件大小
margin: const EdgeInsets.all(10), // 外边距
clipBehavior: Clip.hardEdge, /// 裁剪方式
///边框(使用的时候不能使用color)
child: const Text("container组件"), // 子组件
);
}
}
效果
