Flutter使用技巧（二）

一、padding

运用padding包裹控件,内边距，即本Widget边框和内容区之距离离

// 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),//切割控件填充
	 ]
 )

二、margin

margin，外边距，即本Widget与父边框的距离

// 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)

三、alignment

子Widget对齐，生效范围：父Widget尺度 > child Widget尺度

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

四、Row和Column

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：裁剪，抗锯齿

五、Spacer

Spacer 用来调理 Widget 之间的距离，其本质也是build了一个Expanded组件。会占据一切的剩下空间，因而 MainAxisAlignment 的设置将无效，Spacer 的特点 flex 用于设置剩下空间的分配权重，默许值为 1，表明占据一切剩下空间，假如两个以上 Spacer 则按照 flex 分配剩下空间

示例如下
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,
      ),
    ],
  );