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,

),

),

],

),

);

}

}

代码运行效果图如下:

073554f4153f

代码传送门

Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐