Align用來確定子控件在父布局中的位置，定義如下

const Align({Key key,this.alignment = Alignment.center,this.widthFactor,this.heightFactor,Widget child, })

alignment屬性設置子控件的位置，Alignment中已定義了如下幾種位置：

• Alignment.topLeft：頂部左邊
• ?Alignment.topCenter：頂部中間
• Alignment.topRight：頂部右邊
• Alignment.centerLeft：中部左邊
• Alignment.center：中部中間
• Alignment.centerRight：中部右邊
• Alignment.bottomLeft：底部左邊
• Alignment.bottomCenter：底部中間
• Alignment.bottomRight：底部右邊

我們直接寫個示例看下效果就知道具體表示的位置：

如下所示，有一個容器，里面有一個Flutter圖標，位于容器中部的右邊，其他方位大家可以自己改下代碼看下效果，這里不再多做說明

Container(width: 300,height: 300,color: Colors.green[100],child: Align(alignment: Alignment.centerRight,child: FlutterLogo(size: 60)) )

看源碼可以發現以上定義的位置其實都是Alignment常量，如下所示

/// The top left corner.static const Alignment topLeft = Alignment(-1.0, -1.0);/// The center point along the top edge.static const Alignment topCenter = Alignment(0.0, -1.0);/// The top right corner.static const Alignment topRight = Alignment(1.0, -1.0);/// The center point along the left edge.static const Alignment centerLeft = Alignment(-1.0, 0.0);/// The center point, both horizontally and vertically.static const Alignment center = Alignment(0.0, 0.0);/// The center point along the right edge.static const Alignment centerRight = Alignment(1.0, 0.0);/// The bottom left corner.static const Alignment bottomLeft = Alignment(-1.0, 1.0);/// The center point along the bottom edge.static const Alignment bottomCenter = Alignment(0.0, 1.0);/// The bottom right corner.static const Alignment bottomRight = Alignment(1.0, 1.0);

所以對于中間右邊位置，如下代碼效果也是一樣的

Container(width: 300,height: 300,color: Colors.green[100],child: Align(alignment: Alignment(1.0, 0.0),child: FlutterLogo(size: 60)) )

Alignment中的第一第二個參數分別表示x軸和y軸的的偏移，以矩形的中心點為坐標原點，x軸從-1到1表示矩形的左邊到右邊的距離，y軸從-1到1表示矩形頂部到底部的距離

所以除了以上預定義的9個方位外，我們還可以通過Alignment將子控件放在任何一個位置

?

?

?

總結

以上是生活随笔為你收集整理的Flutter Align控件用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。