Flutter组件————Container

Container

Container 是 Flutter 中最常用的布局组件之一
参数

参数名称类型描述alignmentAlignmentGeometry定义子组件在其内部的对齐方式，默以为 null，即不改变子组件的位置。paddingEdgeInsetsGeometry内边距，用于在子组件四周添加空间。colorColor设置容器的背景颜色。如果设置了 decoration，则此属性会被忽略。decorationDecoration用于绘制容器的装饰（如背景、边框等）。不能与 foregroundDecoration 和 color 同时利用。foregroundDecorationDecoration在子组件之上绘制的装饰。widthdouble设置容器的宽度。heightdouble设置容器的高度。constraintsBoxConstraints对容器尺寸施加束缚条件。marginEdgeInsetsGeometry外边距，用于在容器与其他组件之间添加空间。transformMatrix4应用到容器的变换矩阵，例如旋转、缩放或平移。transformAlignmentAlignmentGeometry指定变换的原点相对于容器的对齐方式，默以为中心。childWidget容器中包含的子组件。clipBehaviorClip控制是否以及如何裁剪超出容器边界的内容，默认值为 Clip.none。constraintsBoxConstraints限制容器巨细的最大最小宽高，当与 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)：定义容器的外形，默认是矩形，也可以设置为圆形。
  

示例代码：

1. Container(
2.   decoration: BoxDecoration(
3.     color: Colors.blue, // 背景颜色
4.     gradient: LinearGradient(colors: [Colors.red, Colors.blue]), // 渐变背景
5.     image: DecorationImage(image: NetworkImage('URL'), fit: BoxFit.cover), // 图片背景
6.     border: Border.all(color: Colors.black, width: 2.0), // 边框
7.     borderRadius: BorderRadius.circular(12.0), // 圆角边框
8.     boxShadow: [
9.       BoxShadow(
10.         color: Colors.grey.withOpacity(0.5),
11.         spreadRadius: 5,
12.         blurRadius: 7,
13.         offset: Offset(0, 3), // 阴影位置
14.       ),
15.     ],
16.   ),
17. )

复制代码

2. ShapeDecoration

ShapeDecoration 可以用来绘制具有特定外形的背景。它通常与 ShapeBorder 结合利用，比如 CircleBorder 或 RoundedRectangleBorder，以创建圆形或圆角矩形等外形。
示例代码：

1. Container(
2.   decoration: ShapeDecoration(
3.     color: Colors.green,
4.     shape: CircleBorder(), // 创建圆形背景
5.   ),
6. )

复制代码

3. Gradient

虽然 Gradient 主要用于 BoxDecoration 中，但它本身也是一个独立的装饰类型，可以直接应用于其他必要渐变结果的地方。Flutter 提供了两种类型的渐变：

• LinearGradient：线性渐变，沿直线方向厘革颜色。
  
• RadialGradient：径向渐变，从中心向外扩散厘革颜色。
  

示例代码

1. class CompentPage extends StatefulWidget {
2.   const CompentPage({super.key});
4.   @override
5.   _CompentPageState createState() => _CompentPageState();
6. }
8. class _CompentPageState extends State<CompentPage> {
9.   @override
10.   Widget build(BuildContext context) {
11.     return Container(
12.       alignment: Alignment.center, //子组件在其内部的对齐方式
13.       padding: const EdgeInsets.all(10), // 内边距
14.       // color: Colors.white, // 背景颜色
15.       decoration: BoxDecoration(
16.           color: Colors.white,
17.           border: Border.all(color: Colors.red, width: 2),
18.           borderRadius: BorderRadius.circular(10)),
19.       width: 200, // 宽度
20.       height: 200, // 高度
21.       constraints: const BoxConstraints(maxHeight: 200), // 限制组件大小
22.       margin: const EdgeInsets.all(10),  // 外边距
23.       clipBehavior: Clip.hardEdge, /// 裁剪方式
24.       ///边框(使用的时候不能使用color)
25.       child: const Text("container组件"), // 子组件
26.     );
27.   }
28. }

复制代码

结果

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。