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: <Widget>[
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,
),
),
],
),
);
}
}
代码运行效果图如下:
代码传送门