Padding 填充

301 阅读1分钟

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,
    )),

运行效果

6337201-8c8bc5c8bb0a6fe4.png.webp

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

运行效果

6337201-e5ade8de5aa71280.png.webp