Flutter中的Alignment是怎么回事？

我们知道Flutter中的Container有个alignment的属性，我们可以设置一些topLeft,center之类的位置名字的值，也可以设置Alignment(x,y)这种具体数值的值。那么Align子widget的位置跟x、y是什么关系呢？以水平方向为例，我们知道x=-1表示子widget和Align的左边重合，x=1表示子widget和Align的右边重合。据此，我们可以计算出子widget的相对位置为：

childX = (alignWidth - childWidth) / 2 * (x+1)

怎么来的呢？根据下面的图所示，绿色的是Align区域，左边的紫色子widget左侧贴紧Align的左侧，此时x=-1。紫色widget移动到和Align的右侧重合时候，x=1。这个过程，紫色widget的移动距离是alignWidth - childWidth。据此我们可以根据它们的线性关系，得出上面公式。

 具体到源码，我们可以找到具体代码实现：

final double halfWidthDelta = (rect.width - size.width) / 2.0;
final double halfHeightDelta = (rect.height - size.height) / 2.0;
return Rect.fromLTWH(
rect.left + halfWidthDelta + x * halfWidthDelta,
rect.top + halfHeightDelta + y * halfHeightDelta,
size.width,
size.height,
);

源码使用的公式是绝对位置，所以加上了Align的left，两者的思路是一致的。

想一想：

如果要让子widget的右侧刚好露出Align右侧50%，x是多少呢？

令childX=alignWidth-childWidth/2=(alignWidth - childWidth) / 2 * (x+1)

得x=alignWidth/(alignWidth-childWidth)

参考：

1.关于前端:Flutter布局彻底搞懂-Align-是怎么对齐的 - 乐趣区

2.《flutter组件详解与实战》王浩然