Flutter学习笔记15-填充(Padding)

Padding可以给其子节点添加填充(留白),和边距效果类似。源码如下:

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

  final EdgeInsetsGeometry padding;
  ...

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。

代码示例:

class PaddingDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      // 上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 8.0),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.red,
            ),
          ),
          Padding(
            // 上下各添加8像素补白
            padding: EdgeInsets.symmetric(vertical: 8.0),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.blue,
            ),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: EdgeInsets.fromLTRB(20.0, .0, 20.0, 20.0),
            child: Container(
              width: 100,
              height: 100,
              color: Colors.orange,
            ),
          ),
        ],
      ),
    );
  }
}

代码运行效果图如下:


代码传送门

你可能感兴趣的:(Flutter学习笔记15-填充(Padding))