一、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,
      ),
    ],
  );

作者：山水有轻音
链接：https://juejin.cn/post/7184022626426159162