Flutter 布局（二）- Padding、Align、Center详解
本文主要介绍flutter布局中的padding、align以及center控件，详细介绍了其布局行为以及使用场景，并对源码进行了分析。
1. padding
a widget that insets its child by the given padding.
1.1 简介
padding在flutter中用的也挺多的，作为一个基础的控件，功能非常单一，给子节点设置padding属性。写过其他端的都了解这个属性，就是设置内边距属性，内边距的空白区域，也是widget的一部分。
flutter中并没有单独的margin控件，在container中有margin属性，看源码关于margin的实现。
if (margin != null) current = new padding(padding: margin, child: current);
不难看出，flutter中淡化了margin以及padding的区别，margin实质上也是由padding实现的。
1.2 布局行为
padding的布局分为两种情况：
- 当child为空的时候，会产生一个宽为left+right，高为top+bottom的区域；
- 当child不为空的时候，padding会将布局约束传递给child，根据设置的padding属性，缩小child的布局尺寸。然后padding将自己调整到child设置了padding属性的尺寸，在child周围创建空白区域。
1.3 继承关系
object > diagnosticable > diagnosticabletree > widget > renderobjectwidget > singlechildrenderobjectwidget > padding
从继承关系可以看出，padding控件是一个基础控件，不像container这种组合控件。container中的margin以及padding属性都是利用padding控件去实现的。
1.3.1 关于singlechildrenderobjectwidget
singlechildrenderobjectwidget是renderobjectwidgets的一个子类，用于限制只能有一个子节点。它只提供child的存储，而不提供实际的更新逻辑。
1.3.2 关于renderobjectwidgets
renderobjectwidgets为renderobjectelement提供配置，而renderobjectelement包含着（wrap）renderobject，renderobject则是在应用中提供实际的绘制（rendering）的元素。
1.4 示例代码
实例代码直接上官方的例子，非常的简单：
new padding(
padding: new edgeinsets.all(8.0),
child: const card(child: const text('hello world!')),
)
例子中对card设置了一个宽度为8的内边距。
1.5 源码解析
构造函数如下：
const padding({
key key,
@required this.padding,
widget child,
})
包含一个padding属性，相当的简单。
1.5.1 属性解析
padding：padding的类型为edgeinsetsgeometry，edgeinsetsgeometry是edgeinsets以及edgeinsetsdirectional的基类。在实际使用中不涉及到国际化，例如适配阿拉伯地区等，一般都是使用edgeinsets。edgeinsetsdirectional光看命名就知道跟方向相关，因此它的四个边距不限定上下左右，而是根据方向来定的。
1.5.2 源码
@override
renderpadding createrenderobject(buildcontext context) {
return new renderpadding(
padding: padding,
textdirection: directionality.of(context),
);
}
padding的创建函数，实际上是由renderpadding来进行的。
关于renderpadding的实际布局表现，当child为null的时候：
if (child == null) {
size = constraints.constrain(new size(
_resolvedpadding.left + _resolvedpadding.right,
_resolvedpadding.top + _resolvedpadding.bottom
));
return;
}
返回一个宽为_resolvedpadding.left+_resolvedpadding.right，高为_resolvedpadding.top+_resolvedpadding.bottom的区域。
当child不为null的时候，经历了三个过程，即调整child尺寸、调整child位置以及调整padding尺寸，最终达到实际的布局效果。
// 调整child尺寸 final boxconstraints innerconstraints = constraints.deflate(_resolvedpadding); child.layout(innerconstraints, parentusessize: true); // 调整child位置 final boxparentdata childparentdata = child.parentdata; childparentdata.offset = new offset(_resolvedpadding.left, _resolvedpadding.top); // 调整padding尺寸 size = constraints.constrain(new size( _resolvedpadding.left + child.size.width + _resolvedpadding.right, _resolvedpadding.top + child.size.height + _resolvedpadding.bottom ));
到此处，上面介绍的padding布局行为就解释的通了。
1.6 使用场景
padding本身还是挺简单的，基本上需要间距的地方，它都能够使用。如果在单一的间距场景，使用padding比container的成本要小一些，毕竟container里面包含了多个widget。padding能够实现的，container都能够实现，只不过，container更加的复杂。
2. align
a widget that aligns its child within itself and optionally sizes itself based on the child's size.
2.1 简介
在其他端的开发，align一般都是当做一个控件的属性，并没有拿出来当做一个单独的控件。align本身实现的功能并不复杂，设置child的对齐方式，例如居中、居左居右等，并根据child尺寸调节自身尺寸。
2.2 布局行为
align的布局行为分为两种情况：
- 当widthfactor和heightfactor为null的时候，当其有限制条件的时候，align会根据限制条件尽量的扩展自己的尺寸，当没有限制条件的时候，会调整到child的尺寸；
- 当widthfactor或者heightfactor不为null的时候，aligin会根据factor属性，扩展自己的尺寸，例如设置widthfactor为2.0的时候，那么，align的宽度将会是child的两倍。
align为什么会有这样的布局行为呢？原因很简单，设置对齐方式的话，如果外层元素尺寸不确定的话，内部的对齐就无法确定。因此，会有宽高因子、根据外层限制扩大到最大尺寸、外层不确定时调整到child尺寸这些行为。
2.3 继承关系
object > diagnosticable > diagnosticabletree > widget > renderobjectwidget > singlechildrenderobjectwidget > align
可以看出，align跟padding一样，也是一个非常基础的组件，container中的align属性，也是使用align去实现的。
2.4 示例代码
new align(
alignment: alignment.center,
widthfactor: 2.0,
heightfactor: 2.0,
child: new text("align"),
)
例子依旧很简单，设置一个宽高为child两倍区域的align，其child处在正中间。
2.5 源码解析
const align({
key key,
this.alignment: alignment.center,
this.widthfactor,
this.heightfactor,
widget child
})
align的构造函数基本上就是宽高因子、对齐方式属性。日常使用中，宽高因子属性基本上用的不多。如果是复杂的布局，container内部的align属性也可以实现相同的效果。
2.5.1 属性解析
alignment：对齐方式，一般会使用系统默认提供的9种方式，但是并不是说只有这9种，例如如下的定义。系统提供的9种方式只是预先定义好的。
/// the top left corner. static const alignment topleft = const alignment(-1.0, -1.0);
alignment实际上是包含了两个属性的，其中第一个参数，-1.0是左边对齐，1.0是右边对齐，第二个参数，-1.0是顶部对齐，1.0是底部对齐。根据这个规则，我们也可以自定义我们需要的对齐方式，例如
/// 居右高于底部1/4处. static const alignment righthalfbottom = alignment: const alignment(1.0, 0.5),
widthfactor：宽度因子，如果设置的话，align的宽度就是child的宽度乘以这个值，不能为负数。
heightfactor：高度因子，如果设置的话，align的高度就是child的高度乘以这个值，不能为负数。
2.5.2 源码
@override
renderpositionedbox createrenderobject(buildcontext context) {
return new renderpositionedbox(
alignment: alignment,
widthfactor: widthfactor,
heightfactor: heightfactor,
textdirection: directionality.of(context),
);
}
align的实际构造调用的是renderpositionedbox。
renderpositionedbox的布局表现如下：
// 根据_widthfactor、_heightfactor以及限制因素来确定宽高
final bool shrinkwrapwidth = _widthfactor != null || constraints.maxwidth == double.infinity;
final bool shrinkwrapheight = _heightfactor != null || constraints.maxheight == double.infinity;
if (child != null) {
// 如果child不为null，则根据规则设置align的宽高，如果需要缩放，则根据_widthfactor是否为null来进行缩放，如果不需要，则尽量扩展。
child.layout(constraints.loosen(), parentusessize: true);
size = constraints.constrain(new size(shrinkwrapwidth ? child.size.width * (_widthfactor ?? 1.0) : double.infinity,
shrinkwrapheight ? child.size.height * (_heightfactor ?? 1.0) : double.infinity));
alignchild();
} else {
// 如果child为null，如果需要缩放，则变为0，否则就尽量扩展
size = constraints.constrain(new size(shrinkwrapwidth ? 0.0 : double.infinity,
shrinkwrapheight ? 0.0 : double.infinity));
}
2.6 使用场景
一般在对齐场景下使用，例如需要右对齐或者底部对齐之类的。它能够实现的功能，container都能实现。
3. center
center继承自align，只不过是将alignment设置为alignment.center，其他属性例如widthfactor、heightfactor，布局行为，都与align完全一样，在这里就不再单独做介绍了。center源码如下，没有设置alignment属性，是因为align默认的对齐方式就是居中。
class center extends align {
/// creates a widget that centers its child.
const center({ key key, double widthfactor, double heightfactor, widget child })
: super(key: key, widthfactor: widthfactor, heightfactor: heightfactor, child: child);
}
4. 后话
笔者建了一个flutter学习相关的项目，，里面包含了笔者写的关于flutter学习相关的一些文章，会定期更新，也会上传一些学习demo，欢迎大家关注。
5. 参考
下一篇： 胃部不适者 饭前不宜喝汤