Flutter Widget（2）:单节点Widget

1.Padding

Padding作为基础控件，功能非常单一，给子节点设置padding属性。Flutter中并没有单独的Margin控件，在Container中有margin属性，实质上也是由Padding实现的。

 const Padding({
    Key key,
    @required this.padding,
    Widget child,
  }) : assert(padding != null),
       super(key: key, child: child);

padding：padding的类型为EdgeInsetsGeometry，EdgeInsetsGeometry是EdgeInsets以及EdgeInsetsDirectional的基类，一般都是使用EdgeInsets。

使用场景
如果在单一的间距场景，使用Padding比Container的成本要小一些，毕竟Container里面包含了多个widget。Padding能够实现的，Container都能够实现，只不过Container更加的复杂。

2.Align

设置child的对齐方式，例如居中、居左居右等，并根据child尺寸调节自身尺寸。Container中的align属性，也是使用Align去实现的。它能够实现的功能，Container都能实现。

 Align(
      alignment: Alignment.bottomRight,
      widthFactor: 5.0,
      heightFactor: 5.0,
      child: new Text("Align"),
)

alignment：对齐方式
widthFactor：宽度因子，如果设置的话，Align的宽度就是child的宽度乘以这个值，不能为负数。
heightFactor：高度因子，如果设置的话，Align的高度就是child的高度乘以这个值，不能为负数。

3.Center

Center继承自Align，只是将alignment设置为Alignment.center，其他属性和逻辑都与Align完全一样

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

        body: Container(
          child: Center(
            widthFactor: 5.0,
            heightFactor: 5.0,
            child: new Text("Align"),
          ),
        ),

4.FittedBox

FittedBox在自己的尺寸范围内缩放并且调整child的位置，与ImageView的ScaleType类似

如果外部有约束的话，按照外部约束调整自身尺寸，然后缩放调整child，按照指定的条件进行布局；
如果没有外部约束条件，则跟child尺寸一致，指定的缩放以及位置属性将不起作用。

          new Container(
            color: Colors.amberAccent,
            width: 300.0,
            height: 300.0,
            child: new FittedBox(
              fit: BoxFit.fill,
              alignment: Alignment.topLeft,
              child: new Container(
                color: Colors.red,
                child: new Text("FittedBox"),
              ),
            ),
          )

5.AspectRatio

AspectRatiode 的作用是调整child的宽高比，AspectRatio首先会在布局限制条件允许的范围内尽可能的扩展，widget的高度是由宽度和比率决定的，类似于BoxFit中的contain，按照固定比率去尽量占满区域。

aspectRatio：宽与高的比例

          new Container(
            width: 360.0,
            child: new AspectRatio(
              aspectRatio:1.5,
              child: new Container(
                color: Colors.grey,
              ),
            ),
          )

6.ConstrainedBox

给child添加额外的约束条件,例如设置最小宽高，尽可能的占用区域等等

const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity //最大值，尽可能占用区域
  });

7.UnconstrainedBox

不添加任何约束条件到child上，让child按照其原始的尺寸渲染。

8.BaseLine

根据child的baseline，来调整child的位置，比如让多个大小不一的Widget在同一水平线上

如果child有baseline，则根据child的baseline属性，调整child的位置；

如果child没有baseline，则根据child的bottom，来调整child的位置。

baseline：baseline数值，必须要有，从顶部算。
baselineType：bseline类型，也是必须要有的，目前有两种类型：
- alphabetic：对齐字符底部的水平线；
- ideographic：对齐表意字符的水平线。

          new Row(
            children: <Widget>[
              new Baseline(
                baseline: 100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Text(
                  'TjTjTj',
                  style: new TextStyle(
                    fontSize: 20.0,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
              new Baseline(
                baseline:100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Container(
                  width: 30.0,
                  height: 30.0,
                  color: Colors.grey,
                ),
              ),
              new Baseline(
                baseline: 100.0,
                baselineType: TextBaseline.alphabetic,
                child: new Text(
                  'RyRyRy',
                  style: new TextStyle(
                    fontSize: 35.0,
                    textBaseline: TextBaseline.alphabetic,
                  ),
                ),
              ),
            ],
          )

9.FractionallySizedBox

FractionallySizedBox控件会根据现有空间，来调整child的尺寸,child就算设置了具体的尺寸数值，也不起作用。

alignment：对齐方式，不能为null。
widthFactor：宽度因子
heightFactor：高度因子

当设置了具体的宽高因子，具体的宽高则根据现有空间宽高 * 因子，有可能会超出父控件的范围，当宽高因子大于1的时候；当没有设置宽高因子，则填满可用区域；

          new Container(
            color: Colors.blue,
            height: 200.0,
            width: 200.0,
            child: new FractionallySizedBox(
              alignment: Alignment.bottomLeft,
              widthFactor: 1.5,
              heightFactor: 0.5,
              child: new Container(
                color: Colors.red,
              ),
            ),
          )

10.IntrinsicHeight 和 IntrinsicWidth

这个控件的作用，是将可能高度宽度不受限制的child，调整到一个合适并且合理的尺寸，会存在效率问题，能别使用就尽量别使用。

11.LimitedBox

限定的最大高度或宽度，默认值是double.infinity，不能为负数。

    LimitedBox(
      maxWidth: 150.0,
      child: Container(
        color: Colors.blue,
        width: 250.0,
      ),
    ),

12.Offstage

一个布局widget，可以控制其子widget的显示和隐藏

当offstage为true，当前控件不会被绘制在屏幕上，不会响应点击事件，也不会占用空间；
当offstage为false，当前控件则跟平常用的控件一样渲染绘制

  new Offstage(
      offstage: false,
      child: Container(color: Colors.blue, height: 100.0),
    ),

13.OverflowBox

OverflowBox这个控件，允许child超出parent的范围显示

alignment：对齐方式。
minWidth：允许child的最小宽度。如果child宽度小于这个值，则按照最小宽度进行显示。
maxWidth：允许child的最大宽度。如果child宽度大于这个值，则按照最大宽度进行展示。
minHeight：允许child的最小高度。如果child高度小于这个值，则按照最小高度进行显示。
maxHeight：允许child的最大高度。如果child高度大于这个值，则按照最大高度进行展示。

Container(
            color: Colors.green,
            width: 100.0,
            height: 100.0,
            padding: const EdgeInsets.all(5.0),
            child: OverflowBox(
              alignment: Alignment.topLeft,
              maxWidth: 200.0,
              maxHeight: 400.0,
              child: Container(
                color: Color(0x33FFFFFF),
                width: 300.0,
                height: 300.0,
              ),
            ),
          )),

14.SizedBox

一个特定大小的盒子。这个widget强制它的孩子有一个特定的宽度和高度。如果宽度或高度为NULL，则此widget将调整自身大小以匹配该维度中的孩子的大小。

child不为null时，如果设置了宽高，则会强制把child尺寸调到此宽高；如果没有设置宽高，则会根据child尺寸进行调整；
child为null时，如果设置了宽高，则自身尺寸调整到此宽高值，如果没设置，则尺寸为0；

        Container(
            color: Colors.green,
            padding: const EdgeInsets.all(5.0),
            child: SizedBox(
              width: 200.0,
              height: 200.0,
              child: Container(
                color: Colors.red,
                width: 100.0,
                height: 300.0,
              ),
            ),
          )

15.SizedOverflowBox

一个具有特定大小的小部件，但将其原始约束传递给其子级，这可能会溢出。

尺寸部分。通过将自身的固定尺寸，传递给child，来达到控制child尺寸的目的；
超出部分。可以突破父节点尺寸的限制，超出部分也可以被渲染显示，与OverflowBox类似。

16.Transform

在绘制子widget之前应用转换的widget，平移、旋转、缩放都可以使用的到。如果只是单纯的进行变换的话，用Transform比用Container效率会更高。

const Transform({
  Key key,
  @required this.transform,
  this.origin,
  this.alignment,
  this.transformHitTests = true,
  Widget child,
})

transform：一个4x4的矩阵。
origin：旋转点，相对于左上角顶点的偏移。默认旋转点是左上角顶点。
alignment：相对于坐标系原点的对齐方式
transformHitTests：点击区域是否也做相应的改变。

另外三种构造函数

Transform.rotate：可以对子widget进行旋转变换
Transform.translate：接收一个offset参数，可以在绘制时沿x、y轴对子widget平移指定的距离。
Transform.scale：可以对子Widget进行缩小或放大

17.CustomSingleChildLayout

一个自定义的拥有单个子widget的布局widget，我们自定义一些单节点布局控件的时候，可以考虑使用它。

CustomSingleChildLayout提供了一个控制child布局的delegate，这个delegate可以控制这些因素：

可以控制child的布局constraints；
可以控制child的位置；
在parent的尺寸不依赖于child的情况下，可以决定parent的尺寸。