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。据此我们可以根据它们的线性关系,得出上面公式。

Flutter中的Alignment是怎么回事?_第1张图片

 具体到源码,我们可以找到具体代码实现:

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组件详解与实战》王浩然

你可能感兴趣的:(Flutter,flutter)