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

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

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

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

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

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

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

看源碼可以發(fā)現(xiàn)以上定義的位置其實(shí)都是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);

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

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

Alignment中的第一第二個(gè)參數(shù)分別表示x軸和y軸的的偏移，以矩形的中心點(diǎn)為坐標(biāo)原點(diǎn)，x軸從-1到1表示矩形的左邊到右邊的距離，y軸從-1到1表示矩形頂部到底部的距離

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

?

?

?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。