Flutter 佈局控制元件篇-->Stack、Positioned

夜夕i發表於2019-10-03

Flutter 中的層疊佈局,相當於Web中的絕對定位,也是相當重要的一部分。

他允許子元件可以根據距父容器四個角的位置來確定自身的位置。絕對定位允許子元件堆疊起來(按照程式碼中宣告的順序)。

Flutter 中使用StackPositioned這兩個元件來配合實現絕對定位。Stack允許子元件堆疊,而Positioned用於根據Stack的四個角來確定子元件的位置。

Stack

允許子元件進行堆疊,就是一層一層的摞起來,和Web中一樣

原始碼示例

建構函式如下:

Stack({
    Key key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    List<Widget> children = const <Widget>[],
 })
複製程式碼

屬性解釋

alignment

此屬性決定如何去對齊沒有定位(沒有使用Positioned)或部分定位的子元件。
所謂部分定位,在這裡特指沒有在某一個軸上定位:leftright為橫軸,topbottom為縱軸,只要包含某個軸上的一個定位屬性就算在該軸上有定位。

textDirection

Row、的textDirection功能一樣,都用於確定alignment對齊的參考系。

即:textDirection的值為TextDirection.ltr,則alignmentstart代表左,end代表右,即從左往右的順序;textDirection的值為TextDirection.rtl,則alignmentstart代表右,end代表左,即從右往左的順序。

fit

用於確定沒有定位的子元件如何去適應Stack的大小。

StackFit.loose表示使用子元件的大小;
StackFit.expand表示擴伸到Stack的大小。

overflow

此屬性決定如何顯示超出Stack顯示空間的子元件;

Overflow.clip表示超出部分會被剪裁(隱藏);
Overflow.visible表示不會被剪裁。

至於使用方法,最後會給出一個例子

Positioned

絕對定位,用於確定子元件的位置

原始碼示例

建構函式如下:

const Positioned({
  Key key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})
複製程式碼

屬性解釋

left、top、right、bottom

他們分別代表離Stack左、上、右、下四邊的距離。

width、height

指定需要定位元素的寬度和高度。

注:Positionedwidthheight和其它地方的意義稍微有點區別,此處用於配合lefttoprightbottom來定位元件,

舉例說明:
在水平方向時,你只能指定leftrightwidth三個屬性中的兩個,如指定leftwidth後,right會自動算出(left+width),如果同時指定三個屬性則會報錯,垂直方向同理。

程式碼示例:

Stack(
  fit: StackFit.expand,  //擴伸到Stack的大小。
  alignment: Alignment.center, //指定未定位或部分定位widget的對齊方式
  children: <Widget>[
	Container(
	  child: Text("xxxxxx", style: TextStyle(color: Colors.white)),
	  color: Colors.pink,
	),
	Positioned(
	  left: 15.0,
	  top: 30.0,
	  child: Text("yyyyyy"),
	),
	Positioned(
	  top: 15.0,
	  child: Text("zzzzzz"),
	)
  ],
);
複製程式碼

執行效果:

圖片載入失敗!

傳送門

Flutter 佈局控制元件篇-->Align、Center

Flutter 佈局控制元件篇-->Wrap、Flow

Flutter 佈局控制元件篇-->Flex、Expanded

Flutter 佈局控制元件篇-->Row、Column


M_M

相關文章