Flutter實(shí)戰(zhàn) 填充(Padding)

Padding可以給其子節(jié)點(diǎn)添加填充（留白），和邊距效果類似。我們在前面很多示例中都已經(jīng)使用過它了，現(xiàn)在來看看它的定義：

Padding({
  ...
  EdgeInsetsGeometry padding,
  Widget child,
})

EdgeInsetsGeometry是一個(gè)抽象類，開發(fā)中，我們一般都使用EdgeInsets類，它是EdgeInsetsGeometry的一個(gè)子類，定義了一些設(shè)置填充的便捷方法。

#EdgeInsets

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

• fromLTRB(double left, double top, double right, double bottom)：分別指定四個(gè)方向的填充。
• all(double value) : 所有方向均使用相同數(shù)值的填充。
• only({left, top, right ,bottom })：可以設(shè)置具體某個(gè)方向的填充(可以同時(shí)指定多個(gè)方向)。
• symmetric({ vertical, horizontal })：用于設(shè)置對稱方向的填充，vertical指top和bottom，horizontal指left和right。

#示例

下面的示例主要展示了EdgeInsets的不同用法，比較簡單，源碼如下：

class PaddingTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      //上下左右各添加16像素補(bǔ)白
      padding: EdgeInsets.all(16.0),
      child: Column(
        //顯式指定對齊方式為左對齊，排除對齊干擾
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            //左邊添加8像素補(bǔ)白
            padding: const EdgeInsets.only(left: 8.0),
            child: Text("Hello world"),
          ),
          Padding(
            //上下各添加8像素補(bǔ)白
            padding: const EdgeInsets.symmetric(vertical: 8.0),
            child: Text("I am Jack"),
          ),
          Padding(
            // 分別指定四個(gè)方向的補(bǔ)白
            padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
            child: Text("Your friend"),
          )
        ],
      ),
    );
  }
}

運(yùn)行效果如圖5-1所示：