又失業了，作為一個高齡Android程序員今年找工作真難呀。現在Flutter是必需技能了，所以最近在自學。所用書籍叫《Flutter實戰》，如下

如今已看了100多頁，發現這本書寫得……有點趕吧，好幾處講得不清不楚，而關于Align的講解更是誤人，里面的講解是錯誤的，于是去網上搜Align的資料，發現也都是抄來抄去，也都講錯了，直到遇到一篇?https://juejin.cn/post/7080793945466208269?才終于有了點頭緒，但是這篇文章講得好像也有點不對，但是給了我一個關鍵點。

先列出示例代碼

Scaffold(appBar: AppBar(title: Text("小書房"),),body: Center(child: Container(color: Colors.yellow,width: 120,height: 120,child:Align(widthFactor: 2,heightFactor: 2,alignment:Alignment(1,1),child:FlutterLogo(size: 60))),),
);

該段代碼效果圖如下

即一個父容器 Container，寬120 高 120，里面一個Align，Align里又有一個 60* 60 的圖標。

為什么圖標會正好在Container的右下角呢？因為Alignment(1,1)。這個又是什么意思？

先說Align構建的坐標系：Align將父容器（此處的父容器就是 Container）的中心點作為坐標系原點，向右為X正軸，向下為Y正軸；Alignment()的兩個參數的單位其實是 Container 的寬、高的一半，即（1,1）表示的坐標點就是從原點 X軸正向挪動 1 個單位（此處就是Container 寬度的一半即60），Y軸正向挪動一個單位（同理，Y坐標也是60），也就是圖中黃色區域（即Container）的右下角頂點。

FlutterLogo為何正好處于Container右下角區域呢？且正好占據Container的四分之一。

看官方解釋

The alignment property describes a point in the child's coordinate system and a different point in the coordinate system of this widget. The Align widget positions the child such that both points are lined up on top of each other.

即 使用Align(x,y) 計算出父容器（此處即指Container）和 子組件 （此處即指FlutterLogo）的目標點，然后讓這兩個點重合，以此確定子組件在父容器的位置。還是以上述的代碼為例，可知Container的目標點坐標為（60,60），同理（子組件的原點也在中心），子組件的目標點為（30,30），恰好它倆的目標點都是各自右下角的頂點，讓這倆點重合，所以最終就導致FlutterLogo正好處于Container的右下角的四分之一區域。

alignment:Alignment(1,2)效果如下圖

child: Container(color: Colors.yellow,width: 180,height: 180,child:Align(widthFactor: 2,heightFactor: 2,alignment:Alignment(1,2),child: FlutterLogo(size: 60))
),效果則如下圖

至于Align中的 widthFactor、heightFactor到底在起什么作用，我還沒弄清，因為怎么修改它倆的值，也不會影響結果。