Flutter Widget之Container

Container是一个单一子元素容器，能够设置背景，边框，宽高，内外边距等的容器。因此，Container是一个非常基础的组件，同时也是用途广泛的组件

构造函数

Container(
    {Key key,
    AlignmentGeometry alignment,
    EdgeInsetsGeometry padding,
    Color color,
    Decoration decoration,
    Decoration foregroundDecoration,
    double width,
    double height,
    BoxConstraints constraints,
    EdgeInsetsGeometry margin,
    Matrix4 transform,
    Widget child}
)

属性

• alignment
  child对齐的属性，可以设置居中、居左、居右、居上、居下等等。之前的Stack已经介绍过了。
• padding： 内边界
• color：背景色
• decoration
  设置装饰，比如边框、圆角、背景图片等。不能给Container同时设置decoration和color属性，如果要同时设置，给decoration设置color就可以。
• foregroundDecoration：设置前景装饰
• width：宽度。
• height：高度。
• constraints：大小范围约束，constraints有四个属性minWidth、minHeight、maxWidth、maxHeight。
• margin: 外边距。
• transform：变换效果，比如翻转、旋转、变形等。
• child：子组件，可以不设置。
  示例代码如下：

Stack(
    fit: StackFit.expand,
    children: [
      Container(
        alignment: AlignmentDirectional.center,
        color: Colors.blue,
        margin: const EdgeInsets.all(15.0),
        child: Container(
          alignment: AlignmentDirectional.topStart,
          width: 100,
          height: 100,
          padding: const EdgeInsets.all(20.0),
          constraints: const BoxConstraints.expand(width: 200.0, height: 200.0),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.amber, width: 2.0),
              borderRadius:
                  const BorderRadiusDirectional.all(Radius.circular(10.0))),
          transform: Matrix4.rotationZ(0.1),
          child: const Text('hello world'),
        ),
      ),
    ],
  );

运行效果：

关于width，height，constraints对Container大小的影响关系

• 不设置宽高和约束，有child，size会尽可能小。
• 不设置宽高和约束，没有child，size会尽可能大。
• 宽高不在约束范围内会无效。