原文在此，这里只为学习

容器类Widget和布局类Widget区别

• 共同点
  容器类Widget和布局类Widget都作用于其子Widget，不同的是：

• 异同点
  1 布局类widget一般都需要接收一个widget数组（children），他们直接或间接继承自（或包含）MultiChildRenderObjectWidget ；而容器类Widget一般只需要接受一个子Widget（child），他们直接或间接继承自（或包含）SingleChildRenderObjectWidget。
  2 布局类Widget是按照一定的排列方式来对其子widget进行排列；而容器类Widget一般只是包装其子Widget，对其添加一些修饰（补白或背景色等）、变换(旋转或剪裁等)、或限制(大小等)。

Padding

Padding给其子节点添加内边距

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

EdgeInsets

我们看看EdgeInsets提供的便捷方法：

• fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的补白。
• all(double value) : 所有方向均使用相同数值的补白。
• only({left, top, right ,bottom })：可以设置具体某个方向的补白(可以同时指定多个方向)。
• symmetric({ vertical, horizontal })：用于设置对称方向的补白，vertical指top和bottom，horizontal指left和right。

示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}
class MyHomePage extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text("测试Padding"),
      ),
     
      body: Align(
        alignment: Alignment.centerLeft,
        child: PaddingTestRoute()
      ),
    );
  }
}

class PaddingTestRoute extends StatelessWidget{

    @override
    Widget build(BuildContext context){

      return Padding(
        padding: EdgeInsets.all(15.0),
        child: Column(
          
            mainAxisAlignment:MainAxisAlignment.start ,

            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 8),
              
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.red,
                ),
              ),
              Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
            ],
        ),
      );
    }
}

其中：

    选用Align 为了方便定义alignment的起始位置
    如果用center则子Widget使用Column 即使设置了
    crossAxisAlignment: CrossAxisAlignment.start,
    也无法让Column从左侧开始布局