Flutter 容器类组件(Padding, Container, ConstrainedBox)的介绍和用法
容器组件用法如下:
Padding
含义: 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
)
)
运行效果:
-
EdgeInsets.symmetric(上下或左右)
body: Padding(
padding: EdgeInsets.symmetric(vertical: 50)
child: Container(
color: Colors.blue,
)
)
运行效果:
-
EdgeInsets.fromLTRB
body: Padding(
padding: EdgeInsets.fromLTRB(16, 32, 48, 64),
child: Container(
color: Colors.blue,
)),
运行图忽略了(见外)
-
EdgeInsets.only
body: Padding(
padding: EdgeInsets.only(left: 16, bottom: 32),
child: Container(
color: Colors.blue,
)),
运行图忽略了(见外)
最后, 大家还是要多加练习,勤写代码,熟能生巧,必成大器!!!
用心做它,真心体会.