Flutter 中的層疊佈局,相當於Web中的絕對定位,也是相當重要的一部分。
他允許子元件可以根據距父容器四個角的位置來確定自身的位置。絕對定位允許子元件堆疊起來(按照程式碼中宣告的順序)。
Flutter 中使用Stack
和Positioned
這兩個元件來配合實現絕對定位。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
)或部分定位的子元件。
所謂部分定位,在這裡特指沒有在某一個軸上定位:left
、right
為橫軸,top
、bottom
為縱軸,只要包含某個軸上的一個定位屬性就算在該軸上有定位。
textDirection
和Row
、的textDirection
功能一樣,都用於確定alignment
對齊的參考系。
即:textDirection
的值為TextDirection.ltr
,則alignment
的start
代表左,end
代表右,即從左往右的順序;textDirection
的值為TextDirection.rtl
,則alignment
的start
代表右,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
指定需要定位元素的寬度和高度。
注:Positioned
的width
、height
和其它地方的意義稍微有點區別,此處用於配合left
、top
、right
、 bottom
來定位元件,
舉例說明:
在水平方向時,你只能指定left
、right
、width
三個屬性中的兩個,如指定left
和width
後,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 佈局控制元件篇-->Flex、Expanded