1.3.2　Align

负责对齐的Align组件其实有2个用途。首先最常见的用途就是决定其子组件的对齐方式，而相对比较小众的功能，是可以把自身尺寸调整到子组件的若干倍，例如将Align组件本身尺寸设置为其child尺寸的1.5倍等。

1．对齐方式

在设置子组件的对齐方式时，Align组件与上文介绍的Container组件用法一致，通过alignment参数传入对齐方式即可，代码如下：

Align(
  alignment: Alignment(-0.5,1.0),
  child: FlutterLogo(),
)

Align组件的alignment属性默认值为居中。一般常用的有以下2种赋值方法：

第1种方法是之前在Container部分所介绍过的，传入Alignment类，也是Flutter团队目前的推荐做法。构造函数为Alignment（double x，doubley），其中x和y分别对应横轴和纵轴方向的位置，常用取值范围为[-1.0，1.0]。横轴方向x，-1.0表示最左边，1.0表示最右边，0.0则坐落于正中间。纵轴方向y，-1.0表示最上面，1.0表示最下面，而例如从上到下1/8的位置就可以通过传入-0.25表示。Flutter框架的Alignment类已对常见的对齐场景制作了相应的内置命名构造函数，方便大家使用和增加代码可读性。例如，左上对齐既可以用Alignment（-1.0，-1.0）表示，也可以直接用Alignment.topLeft表示。

第2种对alignment属性的赋值方法是传入FractionalOffset类。这与传入Alignment非常相似，主要区别在于x和y对应横轴和纵轴方向的位置，常用取值范围为[0.0，1.0]，而不是[-1.0，1.0]。即同样表示正中间，Alignment是（0.0，0.0）而FractionalOffset是（0.5，0.5）。

值得一提的是，上述2种方式都可接收超出范围的值，例如可传入2.0等，代码如下：

图1-29　Align可以使子组件溢出

上述代码在一个父级组件为100×100单位的Container容器内，利用Align组件，将子组件FlutterLogo垂直对齐，并在水平方向溢出50%，运行效果如图1-29所示。

此外，从上例代码中不难对比出，同样y轴方向居中，Alignment类使用0表示，而FractionalOffset类则使用0.5表示。类似地，x轴方向溢出50%的效果也分别用2.0和1.5表示。

Flutter框架小知识

既然有Alignment类，为什么还要有FractionalOffset类

这2类表达的信息完全一致，即通过容器的总尺寸的比例，确定容器内的一个位置点。它们的主要区别在于（0，0）值对应的位置。就Flutter框架的历史而言，首先诞生的是FractionalOffset类，即左上角为（0，0），这也符合很多其他的UI框架的设计习惯。

但后来随着Flutter逐渐完善且更国际化，尤其是当遇到从右至左的阅读习惯（如阿拉伯语）时，Flutter团队发现始终将左上角固定为（0，0）

并不是最好的选择。于是又创建了Alignment类，使（0，0）对应正中间，并鼓励大家开始使用(6)。

为了兼容Alignment类型问世之前的Flutter遗留代码，FractionalOffset将会继续存在于框架中。实战中不推荐大家在新代码中使用。

2．设置自身尺寸

默认情况下，Align组件的自身尺寸会尽量占满父级约束的上限，即越大越好。这很合理，因为只有Align自身尺寸比较大时，才有足够的条件将child摆放在自己内部的指定位置。实战中，若不需要让Align填满父级组件的全部可用空间，则可以利用widthFactor（宽度倍数）和heightFactor（高度倍数）直接将Align自身尺寸设置为子组件的尺寸的倍数。

例如，可通过设置widthFactor 和heightFactor分别将Align组件的宽度和高度设置为child的2.0倍和0.5倍，子组件居中，并在父级插入灰色Container以观察Align组件的实际尺寸，代码如下：

图1-30　设置Align的宽度倍数和高度倍数

运行效果如图1-30所示。

值得一提的是，虽然上例Align组件的高度只有其子组件的一半，但它仍将FlutterLogo完整地绘制到屏幕上了。这是由于Flutter的布局和绘制是相对独立的2个步骤，而尺寸和约束一般是指布局时的概念。Flutter组件通常可以随意地在屏幕的任何位置绘制任何内容。若不需要某组件绘制“出格”的内容，则在实战中可借助ClipRect将出格部分裁剪，具体用法可参考第14章有关ClipRect组件的介绍。