当前位置：首页 > article >正文

Flutter组件————Container

article 2024/12/24 0:18:28

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});

  @override
  _CompentPageState createState() => _CompentPageState();
}

class _CompentPageState extends State<CompentPage> {
  @override
  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组件"), // 子组件
    );
  }
}