Flutter常用Widget（一）Container

详细介绍Container的相关使用。

一、简介

A convenience widget that combines common painting, positioning, and sizing widgets.
一个使用方便的小部件，它融合了常见的绘画，定位和大小调整。

1、构造函数

  Container({
    Key key,    //
    this.alignment, //对齐方式，作用于child，譬如如果是center,表示child在container里面居中
    this.padding, //内部间距
    Color color,  //背景色，
    Decoration decoration,  //背景装饰，与color 不能共存，如需要设置背景，里面也设置背景的方式。
    this.foregroundDecoration,  //前景装饰
    double width, //宽度
    double height,  //高度
    BoxConstraints constraints, //容器大小的限制条件，跟宽高的区别是
    this.margin,  //间距，类似于layoutParams 的maring.
    this.transform, //变换，类似于安卓的矩阵变换.
    this.child,   //对应的控件
  });

Container的使用的场景比较广泛，其他的控件都可以加多一层进行包装，以此来实现margin、pading等相关功能。
看到其构造函数，有一点可能比较疑惑的，不是有宽高了吗？为啥还有个constraints？其实这两个都是指定容器大小，
但如果同时存在，会以constraints 为准，其实width、height的最后实现，也是通过constraints来做的。

2、继承关系

Object (dart.core)
  Diagnosticable (diagnostics.dart)
    DiagnosticableTree (diagnostics.dart)
      Widget (framework.dart)
        StatelessWidget (framework.dart)
          Container (container.dart)

3、绘制过程

• 最里层是child
• child外层由Padding包着
• 然后添加额外的constraints限制
• 最后添加margin

绘制的时候，首先绘制给定的变换(transform)，然后绘制装饰填充物，接着绘制child，最后将前景装饰绘制出来。

Container Widget 在没有子child的情况下，会尽可能地变大，除非传入的constraints是无边界的，在这种情况下，container会尽可能地小。
在有child的情况下，会根据child的参数来决定，但如果container 设置了width 、height或者constraints，则会根据这些参数来绘制。

4、布局实现

因为Container融合了其他的一些widget，并且这些widget都有各自的布局行为，所以Container的布局方式有一些复杂。
总的来说：容器会尝试以下操作：

• 遵守对齐方式，根据子项调整大小，
• 遵守宽度，高度和约束，
• 扩展以适配父亲，以使其尽可能小

具体来讲就是：

如果container没有孩子，没有设置宽高，没有设置constraints，并且父容器设置了constraints 为 unbounded，那么container会让自己尽可能的小；

如果container没有孩子并且没有设置对齐方式，但是设置了宽高或者constraints(宽度最后其实都会转换成constraints去布局)，他会根据自己的constraints和父节点的constraints，尽可能地小；

如果container没有孩子，没有宽高没有constraints和alignment，但是父节点设置了有界的约束，那么container会尽可能根据父节点的有界约束尽可能地撑大自己；

如果container设置了对齐方式，并且父节点设置了无边界的约束，那么container会调节自身尺寸来包住子child;

如果container设置了对齐方式，并且父节点设置了有边界的约束，那么container会尽可能地撑大自己(根据父节点的大小)，然后将其子child按照设置的alignment进行调整；

如果container只有子child，没有设置宽高，没有设置constraints，没有设置alignment，那么container就会将父节点的constraints传递给孩子，并根据child进行调整；

二、使用方式

1、代码示例

class ContainerWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      height: 200,
      alignment: Alignment.center,
      margin: EdgeInsets.only(top: 45, left: 120),
      padding: EdgeInsets.all(20),

//      color: Colors.yellow,

      decoration: BoxDecoration(  //背景装饰
          color: Colors.yellow,
          gradient: RadialGradient( //渐变
            colors: [Colors.red, Colors.orange],
            center: Alignment.center,
            radius: .98,
          ),

          boxShadow: [  //卡片阴影
            BoxShadow(
              color: Colors.black54,
              offset: Offset(2.0, 2.0),
              blurRadius: 4.0
            )
          ]
      ),

      transform: Matrix4.rotationZ(0.2),

      child: Text("520", style: TextStyle(color: Colors.white, fontSize: 40.0), ),
    );
  }

}

2、效果图

这里面的padding 和maring，如果你做过安卓或者iOS的开发，应该比较容易理解，其实就是一个是内部的空白，一个是外部的空白。

3、适用场景

• 需要设置背景色；
• 需要设置圆角；
• 需要设置背景图片；
• 需要设置间距；

三、源码解析

  @override
  Widget build(BuildContext context) {
    Widget current = child;
    //如果没有child，并且没有设置constraints，那么就创建一个LimitedBox，
    if (child == null && (constraints == null || !constraints.isTight)) {
      current = LimitedBox(
        maxWidth: 0.0,
        maxHeight: 0.0,
        child: ConstrainedBox(constraints: const BoxConstraints.expand()),
      );
    }
    //设置对齐方式
    if (alignment != null)
      current = Align(alignment: alignment, child: current);

    final EdgeInsetsGeometry effectivePadding = _paddingIncludingDecoration;
    //设置间距
    if (effectivePadding != null)
      current = Padding(padding: effectivePadding, child: current);
      //设置背景色
    if (decoration != null)
      current = DecoratedBox(decoration: decoration, child: current);
      //设置前景色
    if (foregroundDecoration != null) {
      current = DecoratedBox(
        decoration: foregroundDecoration,
        position: DecorationPosition.foreground,
        child: current,
      );
    }
    //设置约束
    if (constraints != null)
      current = ConstrainedBox(constraints: constraints, child: current);
      //设置margin，其实最终也是包了一层padding来实现；
    if (margin != null)
      current = Padding(padding: margin, child: current);
      //最后，设置变换Transform
    if (transform != null)
      current = Transform(transform: transform, child: current);
    return current;
  }

build方法其实并不复杂，每行做的事情，已经注释，总的来讲，就是不设置约束情况，按照父节点尽可能大，如果有约束，则按照内部的来。

四、参考

https://api.flutter.dev/flutter/widgets/Container-class.html