Padding 可以给其子节点添加填充(留白),和边距效果类似。我们在前面很多示例中都已经使用过它了,现在来看看它的定义:

  1. (new) Padding Padding({Key key,
  2. EdgeInsetsGeometry padding,
  3. Widget child})

EdgeInsetsGeometry是一个抽象类,开发中,我们一般都使用EdgeInsets类,它是EdgeInsetsGeometry的一个子类,定义了一些设置填充的便捷方法

EdgeInsets

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

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

下面的示例主要展示了 EdgeInsets 的不同用法,比较简单,源码如下:

  1. class PaddingTestRoute extends StatelessWidget {
  2. @override
  3. Widget build(BuildContext context) {
  4. return Padding(
  5. //上下左右各添加16像素补白
  6. padding: EdgeInsets.all(16.0),
  7. child: Column(
  8. //显式指定对齐方式为左对齐,排除对齐干扰
  9. crossAxisAlignment: CrossAxisAlignment.start,
  10. children: <Widget>[
  11. Padding(
  12. //左边添加8像素补白
  13. padding: const EdgeInsets.only(left: 8.0),
  14. child: Text("Hello world"),
  15. ),
  16. Padding(
  17. //上下各添加8像素补白
  18. padding: const EdgeInsets.symmetric(vertical: 8.0),
  19. child: Text("I am Jack"),
  20. ),
  21. Padding(
  22. // 分别指定四个方向的补白
  23. padding: const EdgeInsets.fromLTRB(20.0,.0,20.0,20.0),
  24. child: Text("Your friend"),
  25. )
  26. ],
  27. ),
  28. );
  29. }
  30. }

运行效果如图所示:
填充(Padding) - 图1