Flutter配置：组件对齐的规则官方并没有明确，这篇文章很好地理解了这一点，

对齐元素通常用于在开发过程中设置小元素的位置。经常会用到多个靠右的位置，比如：alignment：Alignment.bottomRight，比如右下角。最近看了alignment的官方文档：Alignment(x, y) 看来Align中的计算解释有点错误。有了相关源码，终于搞清楚了。后来我发现网上的教程信息大部分都是错误的。我来分享一下我对对齐原则的理解。

所需知识：对齐

通过在矩形上放置虚拟坐标系来实现。这个虚拟坐标系的原点就是矩形的中心，那么(x,y)就是这个虚拟坐标系的锚点，就说(x,y)的值就代表了对应的值。 。例如Alignment(0.0, 0.0)为中心点，Alignment(1.0, 1.0)为右下角，如图：

(x,y)的x值分量为矩形宽度的一半。例如，2.0等于整个矩形的宽度；等于y，y是矩形高度的一半。使用公式将

转换为以矩形左上角为原点的坐标系中的锚点。转换公式如下：(x * w/2 + w/2, y * h/2 + h/2)，其中w为矩形的宽度，h为矩形的高度。附上下图来了解一下计算过程：

绿色框为矩形，黑色坐标为虚拟框，蓝色坐标为以矩形左上角为背景的框。以虚拟坐标轴上的横坐标x为例，转换为目标点的横坐标x' = 矩形宽度的一半加上x * 矩形宽度的一半（虚拟轴上x的单位是一半矩形的宽度）。

例如，更改Alignment(2.0, 0.0)点后的横坐标值为矩形宽度的1.5倍，而不是矩形宽度的两倍。

对齐的工作原理

对齐的官方文档包含这样一句话：

它的工作原理

对齐属性定义了child♶坐标系中的一个点是此小部件的另一个点坐标系。对齐小部件设置 child，以便两个点在其顶部对齐。对齐元素坐标系；然后调整子组件的位置，使两个点匹配。

错误解释

从上面的定义可以看出，最终的放置坐标也和Align的大小有关，因为在过程中对齐是用来计算Align中的一个点的。但在官方文档的示例说明中，我发现计算器与子组件相关：

而且我在网上找到的一些教程中的解释也是错误的，比如这个：

证明起来很简单。这个错误。将其放入容器内，然后将其设置为 Alignment(1.0, 0.0)，然后随机放置一个元素，如下所示：

Container(
  height: 120,
  width: 200,
  color: Colors.green.withOpacity(0.6),
  child: Align(
    alignment: Alignment(1.0, 0.0),
    child: Container(
      width: 60,
      height: 60,
      color: Colors.red,
    ),
  ),
),

你会发现，无论你改变外容器的宽度多少，右侧。里面的红色矩形对应于外部容器的右侧。如果定位坐标只与子元素的宽度成正比怎么办？

我的理解

官方文档给出了计算规则，但没有具体公式。我检查了相关源码，确认方法描述正确。下面我用一个简单的例子来说明计算过程，并提供正确的计算公式。

上图中的绿色矩形是Align的大小，红色是小元素。我仍然使用 Alignment(1.0, 0.0) 进行显示。Alignment(1.0, 0.0) 指定的点的横坐标位于绿色矩形和红色矩形的右边缘。如果将附加元素对齐到此位置，则红色矩形应位于红色虚线框内。但根据其工作原理的描述，当Align设置子组件时，两个点重合，即红色矩形右边缘的点与红色矩形右侧的点重合。绿色边框。现在我们需要从红点框的位置移动到实框的位置，即：Align 的锚点横坐标减去子组件中锚点的横坐标：

alignWidth / 2 + x * (alignWidth / 2) - childWidth / 2 - x * (childWidth / 2)

对于坐标的 y 值也可以在同一步骤中确定，因此计算最终锚点的公式应该为：

var x = (alignWidth - childWidth) / 2 + x * ((alignWidth - childWidth) / 2);
var y = (alignHeight - childHeight) / 2 + x * ((parentHeight - childHeight) / 2);

最后，如果对齐方式为 FractionalOffset，则可以使用相同的过程确定位置。 FractionalOffset 和 Alignment 的区别在于，FractionalOffset 在虚拟坐标系中的原点位于矩形的左上角，而 FractionalOffset(x, y) 的 x 分量是矩形的整个宽度，而不是矩形的一半。 Align 中的设置仍然遵循两个 FractionalOffset 点以保持它们对齐。