Flutter Container

Flutter 中的容器是一个父级 Widget，可以包含多个子 Widget，并通过宽度、高度、内边距、背景颜色等有效地管理它们。它是一个 Widget，它组合了子 Widget 的常见绘制、定位和大小调整。它也是一个类，用于存储一个或多个 Widget，并根据我们的需要将它们定位在屏幕上。通常，它类似于用于存储内容的盒子。它允许用户使用许多属性来装饰其子 Widget，例如使用边距，将容器与其他内容分隔开。

容器 Widget 与 html 中的 <div> 标签相同。如果此 Widget 不包含任何子 Widget，它将自动填充屏幕上的整个区域。否则，它将根据指定的高度和宽度包装子 Widget。需要注意的是，如果没有父级 Widget，则此 Widget 无法直接呈现。我们可以使用 Scaffold Widget、Center Widget、Padding Widget、Row Widget 或 Column Widget 作为其父级 Widget。

为什么我们需要 Flutter 中的容器 Widget？

如果我们有一个需要一些背景样式的 Widget，可能是颜色、形状或大小约束，我们可以尝试将其包装在一个容器 Widget 中。此 Widget 可帮助我们组合、装饰和定位其子 Widget。如果我们将 Widget 包装在一个容器中，那么如果不使用任何参数，我们不会注意到其外观有任何差异。但是，如果我们在容器中添加任何属性，例如颜色、边距、内边距等，我们就可以根据需要在屏幕上设置 Widget 的样式。

一个基本容器在其子 Widget 周围具有边距、边框和内边距属性，如下图所示

容器类的构造函数

以下是容器类构造函数的语法

容器 Widget 的属性

让我们详细了解容器 Widget 的一些基本属性。

1. child: 此属性用于存储容器的子 Widget。假设我们以 Text Widget 作为其子 Widget，如下例所示

2. color: 此属性用于设置文本的背景颜色。它还会更改整个容器的背景颜色。请参见以下示例

3. height 和 width: 此属性用于根据我们的需要设置容器的高度和宽度。默认情况下，容器始终根据其子 Widget 占用空间。请参见以下代码

4. margin: 此属性用于包围 e容器周围的空白区域。我们可以通过查看容器周围的空白来观察到这一点。假设我们使用了 EdgeInsets.all(25)，它在所有四个方向上设置了相等的边距，如下例所示

5. padding: 此属性用于设置容器的边框（所有四个方向）与其子 Widget 之间的距离。我们可以通过查看容器和子 Widget 之间的空间来观察到这一点。在这里，我们使用了 EdgeInsets.all(35)，它设置了文本与所有四个容器方向之间的空间

6. alignment: 此属性用于设置子级在容器中的位置。 Flutter 允许用户以各种方式对齐其元素，例如居中、底部、底部居中、左上、居右、左、右等等。在下面的示例中，我们将把它的子项对齐到右下角位置。

7. decoration: 此属性允许开发人员在 Widget 上添加装饰。它在子级后面装饰或绘制 Widget。如果我们想在子级前面装饰或绘制，我们需要使用 forgroundDecoration 参数。下图解释了它们之间的区别，其中 foregroundDecoration 覆盖了子级，而 decoration 在子级后面绘制。

decoration 属性支持许多参数，例如颜色、渐变、背景图像、边框、阴影等。需要确保的是我们可以在容器中使用 color 属性或 decoration，但不能两者都使用。参见下面的代码，我们在其中添加了边框和阴影属性来装饰框

我们将看到以下屏幕截图中的输出

8. transform: transform 属性允许开发人员旋转容器。它可以朝任何方向旋转容器，即更改父 Widget 中的容器坐标。在下面的示例中，我们将围绕 z 轴旋转容器。

9. constraints: 当我们想向子级添加其他约束时，会使用此属性。它包含各种构造函数，例如 tight、loose、expand 等。让我们看看如何在我们的应用中使用这些构造函数

tight: 如果我们在此使用 size 属性，它将为子级提供固定值。

expand: 在这里，我们可以选择子级的高度、宽度或两个值。

让我们通过一个示例来理解它，在该示例中，我们将尝试涵盖容器的大多数属性。打开 main.dart 文件，并将其替换为以下代码

输出

当我们运行此应用时，它将给出以下屏幕截图