Flutter-单个布局的组件（Align、Center、Padding、Container）

为实现界面各种布局的样式，采用很多组件的组合形成一个复杂的布局。说到flutter的离不开Widget，flutter的=布局也是使用Widget来完成的。
1.Align组件
先看一下Align的源码：

const Align({
  Key key,
  this.alignment: Alignment.center, 
  this.widthFactor, 
  this.heightFactor, 
  Widget child
})

alignment：对齐方式，默认居中对齐
widthFactor：宽度，不设置的情况，会尽可能大
heightFactor：高度，不设置的情况，会尽可能大
Widget child：要布局的子Widget（相当于控件）
widthFactor和heightFactor作用：
父组件中对齐的方式必须知道父组件的范围宽度和高度；
如果widthFactor和heightFactor不设置大小尽可能的占据父组件的整个视图；
设置一个值比如2，Align相当于子控件的3倍（可以代码调试看看效果）
示例：

class MyAlignBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Align(
      child: Icon(Icons.radar,size: 40,color: Colors.yellow,),
      alignment: Alignment.bottomCenter,
      widthFactor: 10,//可以看看更改这个两个值的大小
      heightFactor: 10,
    );
  }
}

widthFactor和heightFactor去掉就是默认的额效果。

2.Center组件
Center的翻译是居中，实际上Center也是继承Align,是将alignment设置为Alignment.center。
源码示例:

class Center extends Align {
  const Center({
    Key key,
    double widthFactor,
    double heightFactor,
    Widget child
  }) : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

代码只需要把Align换成Center：

class MyCenterBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Icon(Icons.radar,size: 40,color: Colors.yellow,),
      widthFactor: 10,
      heightFactor: 10,
    );
  }
}

展示的是一个子控件在父控件的中间。

3.Padding组件
Padding很容易看出是边距在安卓和ios中，但是在flutter中是一个Widget，但是flutter中也没有这个样去管理，也可以设置外边距。通常是设置子widget和父widget的边距。我们用一个文本来设置：

class MypaddingBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(20),
      child: Text(
        "这是一个有边距的文本，学习一下是怎么设置的。",
        style: TextStyle(
            color: Colors.red,
            fontSize: 18
        ),
      ),
    );
  }
}

4.Container
Container在开发中使用的是非常多，常常作为容器。
源码示例：

Container({
  this.alignment,
  this.padding, 
  Color color,
  Decoration decoration,
  Decoration foregroundDecoration, 
  double height,
  BoxConstraints constraints,
  this.margin,
  this.transform, 
  this.child,
})

说明一点color和decoration是互斥的，当指定color时，Container内会自动创建一个decoration；（decoration前面已经介绍了）
代码示例（设置一个有背景的）：

class MyContainerBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: Icon(Icons.radar, size: 32, color: Colors.white),
        color: Colors.blueAccent,
        width: 200,
        height: 200,
      ),
    );
  }
}

单个布局的还有很多的，可以自己进行学习，下一章简单的讲一下多布局的使用，简单的说就是单布局的各种组合。