Flutter容器组件<填充Padding>

Flutter入门笔记系列文章部分内容来源于《Flutter 实战》，如有侵权请联系删除！

在介绍组件和布局的时候，或多或少会出现一些容器类，例如Padding、Container、ConstrainedBox等等。从本文开始，我们将系统地学习如何使用这些容器类。

Padding

Padding用来为子元素添加填充，也就是指定子元素与容器边界的距离，作用基本上与Android中ViewGroup的padding属性相同。

const Padding({
  Key key,
  @required this.padding,
  Widget child,
})

我们一般使用EdgeInsets类，它是EdgeInsetsGeometry的一个子类，定义了一些设置填充的便捷方法。

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。

接下来逐个演示这四个方法的用法：

• EdgeInsets.all

body: Padding(
    padding: EdgeInsets.all(16),
    child: Container(
      color: Colors.blue,
    )),

运行效果

EdgeInsets.all

• EdgeInsets.symmetric

body: Padding(
    padding: EdgeInsets.symmetric(vertical: 48),
    child: Container(
      color: Colors.blue,
    )),

运行效果

EdgeInsets.symmetric

• EdgeInsets.fromLTRB

body: Padding(
    padding: EdgeInsets.fromLTRB(16, 32, 48, 64),
    child: Container(
      color: Colors.blue,
    )),

运行效果

EdgeInsets.fromLTRB

• EdgeInsets.only

body: Padding(
    padding: EdgeInsets.only(left: 16, bottom: 32),
    child: Container(
      color: Colors.blue,
    )),

运行效果

EdgeInsets.only