Flutter使用技巧（二）

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例：4个方向各添加16像素补白
padding: EdgeInsets.all(16.0)
// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
padding: const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例：在左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),
// 4. 设置对称方向的填充
// vertical：针对垂直方向top、bottom
// horizontal：针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0)

Padding(
   padding: const EdgeInsets.all(20),//统一设置四边距离
   child: Text('content')
)
Padding(
   padding: const EdgeInsets.only(left,top,right,bottom),//分开设置四边距离
   child: Text('content')
)
//使用Container包裹控件
Container(
  padding: const EdgeInsets.all(30),
  margin: const EdgeInsets.all(20),
  child：Text('content')
)
//使用SizedBox填充的方式增加距离
 Column(
   child:[
    Text('我是第一行'),
    SizedBox(height:20,with:40),//分割控件填充
    Text('我是第二行行'),
    SizedBox(height:20,with:40),//分割控件填充
   ]
 )

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例：4个方向各添加16像素补白
margin: EdgeInsets.all(16.0)
// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
margin：const EdgeInsets.fromLTRB(10,20,30,40)
// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例：在左边添加8像素补白
margin：const EdgeInsets.only(left: 8.0),
// 4. 设置对称方向的填充
// vertical：针对垂直方向top、bottom
// horizontal：针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素补白
margin：const EdgeInsets.symmetric(vertical: 8.0)

// 居中 & 各方向对齐
center
centerLeft
centerRight
// 底部对齐 & 各方向对齐
bottomCenter
bottomLeft
bottomRight
// 顶部对齐 & 各方向对齐
topCenter
topLeft
topRight
// 示例
alignment：Alignment.center

Row：在水平方向上排列子widget的列表，属于多子元素容器。  
Column：在垂直方向上排列子widget的列表，属于多子元素容器。  
他们的父类都是Flex组件，根据Flex设置方向为水平或者垂直，就有了Row和Column。  
注意：这两个组件自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。可以在外层套一个SingleChildScrollView之类的组件使它们可以滚动。

属性
1.  direction  
    设置主轴方向，可设置的值为 Axis.horizontal 和 Axis.vertical，交叉轴与主轴方向垂直。
2.  mainAxisAlignment  
    设置子 Widget 沿着主轴方向的排列方式，默认 MainAxisAlignment.start，可设置的方式如下：
-   MainAxisAlignment.start：左对齐，默认值;
-   MainAxisAlignment.end：右对齐;
-   MainAxisAlignment.center：居中对齐;
-   MainAxisAlignment.spaceBetween：两端对齐;
-   MainAxisAlignment.spaceAround：每个 Widget 两侧的间隔相等，与屏幕边缘的间隔是其他 Widget 之间间隔的一半;
-   MainAxisAlignment.spaceEvenly：平均分布各个 Widget，与屏幕边缘的间隔与其他 Widget 之间的间隔相等；  
3.  mainAxisSize  
    设置主轴的大小，默认 MainAxisSize.max，可设置的值如下：
-   MainAxisSize.max：主轴的大小是父容器的大小；
-   MainAxisSize.min：主轴的大小是其子 Widget 大小之和；
4.  crossAxisAlignment  
    设置子 Widget 沿着交叉轴方向的排列方式，默认 CrossAxisAlignment.center，可设置的方式如下：
-   CrossAxisAlignment.start：与交叉轴的起始位置对齐；
-   CrossAxisAlignment.end：与交叉轴的结束位置对齐；
-   CrossAxisAlignment.center：居中对齐；
-   CrossAxisAlignment.stretch：填充整个交叉轴；
-   CrossAxisAlignment.baseline：按照基线对齐；
5.  textDirection  
    决定水平方向上的摆放顺序，设置方式如下：
-   TextDirection.ltr：从左到右摆放
-   TextDirection.rtl：从右到左摆放
6.  verticalDirection  
    设置垂直方向上的子 Widget 的排列顺序，默认为 VerticalDirection.down，设置方式如下：
-   VerticalDirection.down：start 在顶部，end 在底部；
-   VerticalDirection.up：start 在底部，end 在顶部。
7.  textBaseline  
    设置文字对齐的基线类型，可设置的值如下：
-   TextBaseline.alphabetic：与字母基线对齐；
-   TextBaseline.ideographic：与表意字符基线对齐；  
    使用时当 crossAxisAlignment 设置为 baseline 时，必须设置 textBaseline 属性的值
8.  clipBehavior  
    当子组件超出容器时的裁剪行为，设置方式如下：
-   Clip.none：不裁剪
-   Clip.hardEdge：裁剪
-   Clip.antiAlias：裁剪，抗锯齿
-   Clip.antiAliasWithSaveLayer：裁剪，抗锯齿

示例如下
Row(
    children: <Widget>[
      Container(
        width: 80,
        height: 80,
        color: Colors.red,
      ),
      const Spacer(
        flex: 1,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.green,
      ),
      const Spacer(
        flex: 2,
      ),
      Container(
        width: 80,
        height: 80,
        color: Colors.yellow,
      ),
    ],
  );