前言
容器类Widget不同于布局类Widget：前面在使用Widget的时候可以看出来大部分Widget不能设置内边距和外边距，也不能指定宽高，而容器类的Widget刚好可以祢补这些问题
正文
首先先看下Flutter中的容器类Widget有哪些
- Padding - 通过给自己指定内边距来添加子Widget
先看下效果图
367E0F73-F458-46EC-B86C-65722455BE42.png
看下代码
Padding(
padding: EdgeInsets.all(10),
child: Image.asset("images/timg.jpeg"),
)
这里我们给4个边都添加了内边距，接下来我们只给左边添加看下效果
ED22ED4E-DA16-4AE6-9221-1D9815892B2A.png
这是可以看到现在只有左边有内边距，我们看下代码实现
Padding(
padding: EdgeInsets.only(left: 10),
child: Image.asset("images/timg.jpeg"),
)
下面我们看下Padding的构造函数
const Padding({
Key key,
@required this.padding,//内边距，类型是EdgeInsetsGeometry
Widget child,//子Widget
}) : assert(padding != null),
super(key: key, child: child);
上面的例子中我们看到EdgeInsets有两个方法only和all，
EdgeInsets是EdgeInsetsGeometry的实现类，我们一般使用EdgeInsets来设置Padding的内边距，下面看下它的方法
- EdgeInsets.all(double value)：上下左右边距都一样
- EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom)：给上下左右边距分别赋值
- EdgeInsets.only()：单独指定某个边距
- EdgeInsets.symmetric()：同时给上下或者左右设置边距
- Container - 一个拥有绘制、定位、调整大小的Widget
先看下Container实现的效果图
1D41841E-B6CE-428A-BAA5-14CB68418664.png
代码展示
Container(
color: Colors.red,
margin: EdgeInsets.only(top: 50,left: 80),
transform: Matrix4.rotationZ(.2),
padding: EdgeInsets.all(10),
child: Image.asset("images/timg.jpeg"),
)
下面看下Container的构造函数
Container({
Key key,
this.alignment,//容器内 child 的对齐方式,类型是AlignmentGeometry
this.padding,//容器内边距,类型是EdgeInsetsGeometry
Color color,//容器的背景色，类型是Color
Decoration decoration,//容器的背景装饰，类型是Decoration
this.foregroundDecoration,//容器的前景装饰，类型是Decoration
double width,//容器的宽度
double height,//容器的高度
BoxConstraints constraints,//容器的大小限制，类型是BoxConstraints
this.margin,//容器的外边距，类型是EdgeInsetsGeometry
this.transform,//容器的变化，类型是Matrix4
this.child,//容器内显示的Widget
}) :
... ;
- Align - 可以控制子Widget的位置，并能根据子Widget大小调整自身大小的Widget
先看下使用的效果图
1451ED97-2A90-4239-A2DE-B0A94BFE2933.png
代码展示
Align(
alignment: Alignment.bottomCenter,
child: Image.asset("images/timg.jpeg",width: 200,),
)
我们先看下Align的构造函数
const Align({
Key key,
this.alignment = Alignment.center,//容器内 child 的对齐方式,类型Alignment
this.widthFactor,//宽度因子
this.heightFactor,//高度因子
Widget child,
}) : assert(alignment != null),
assert(widthFactor == null || widthFactor >= 0.0),
assert(heightFactor == null || heightFactor >= 0.0),
super(key: key, child: child);
我们看到除了上面例子重的alignment属性和child属性外还有另外两个字段，它们分别是容器的宽度因子和高度因子，下面我们来看下这两个字段的使用方法和使用后效果
我们先只设置宽度因子，看下效果
60673A84-3294-4A45-8EB5-5F3A88E22C1B.png
代码展示
Align(
alignment: Alignment.bottomCenter,
widthFactor: 1,
child: Image.asset("images/timg.jpeg",width: 200,),
)
当我们设置了宽度因子后容器的宽度就变成了宽度因子子widget的宽度了，同理高度因子大家应该也能明白什么意思了，设置后容器的高度就会变成高度因子子widget的高度，下面看下效果
E9837D69-F719-4BA6-B060-5CE371816406.png
代码展示
Align(
alignment: Alignment.bottomCenter,
widthFactor: 1,
heightFactor: 2,
child: Image.asset("images/timg.jpeg",width: 200,),
)
可以看到容易的宽现在变成了子widget的宽，高变成了子Widget高的2倍
- Center - 可以将子Widget剧中显示的Widget
对于Center在学习了Align之后，其实很好理解，因为它是继承自Align，就是alignment为Alignment.Center的Align
先看下效果
0D1CF1FC-8BEA-449B-A4D0-9FCF135AF9CF.png
代码展示
Center(
child: Image.asset("images/timg.jpeg",width: 200,),
)
就是这么简单，看下其构造函数
const Center({ Key key, double widthFactor, double heightFactor, Widget child })
: super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
其他的参数跟Align的都是相同的，这里就不做重复介绍了
到这里Flutter中的容器类Widget就介绍完了。
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。
Flutter 系列文章
- Flutter 学习 - 开篇
- Flutter 学习 - 基础框架
- Flutter 学习 - 网络请求和数据解析
- Flutter 学习 - Widget 之 Text
- Flutter 学习 - Widget 之 RichText
- Flutter 学习 - Widget 之 Image和Icon
- Flutter 学习 - Widget 之 TextField
- Flutter 学习 - Widget 之 菜单按钮
- Flutter 学习 - Widget 之 布局 Widget
- Flutter 学习 - 容器类Widget
- Flutter 学习 - 可滚动的 Widget
- Flutter 学习 - 功能类Widget
更多关于技术相关的内容请关注博主公众号--迷途程序猿
迷途程序猿