原文在此异雁，這里只為學習
層疊布局和Web中的絕對定位华临、Android中的Frame布局是相似的窘行，子widget可以根據(jù)到父容器四個角的位置來確定本身的位置饥追。絕對定位允許子widget堆疊（按照代碼中聲明的順序）。Flutter中使用Stack和Positioned來實現(xiàn)絕對定位抽高，Stack允許子widget堆疊判耕，而Positioned可以給子widget定位（根據(jù)Stack的四個角）透绩。
Stack
class Stack extends MultiChildRenderObjectWidget {
......
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
}) : super(key: key, children: children);
......
}
-
alignment：此參數(shù)決定如何去對齊沒有定位（沒有使用Positioned）或部分定位的子widget翘骂。所謂部分定位，在這里特指沒有在某一個軸上定位：left帚豪、right為橫軸碳竟，top、bottom為縱軸狸臣，只要包含某個軸上的一個定位屬性就算在該軸上有定位莹桅。 -
textDirection：和Row、Wrap的textDirection功能一樣烛亦，都用于決定alignment對齊的參考系即：
textDirection的值為TextDirection.ltr诈泼，則alignment的start代表左，end代表右煤禽；
textDirection的值為TextDirection.rtl铐达，則alignment的start代表右，end代表左檬果。
-
fit：此參數(shù)用于決定沒有定位的子widget如何去適應Stack的大小瓮孙。
StackFit.loose表示使用子widget的大小，
StackFit.expand表示擴伸到Stack的大小选脊。
-
overflow：此屬性決定如何顯示超出Stack顯示空間的子widget
Overflow.clip時杭抠，超出部分會被剪裁（隱藏）
Overflow.visible 時則不會。
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用于指定定位元素的寬度和高度沮峡，注意疚脐，此處的width、height 和其它地方的意義稍微有點區(qū)別邢疙，此處用于配合left棍弄、top 、right疟游、 bottom來定位widget呼畸，舉個例子，在水平方向時颁虐，你只能指定left蛮原、right、width三個屬性中的兩個另绩，如指定left和width后儒陨，right會自動算出(left+width)，如果同時指定三個屬性則會報錯笋籽，垂直方向同理蹦漠。
示例
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 300,
height: 200,
color: Colors.red,
),
Positioned(
//left: 18,
//top: 15,
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
),
Positioned(
top: 0,
child: Container(
width: 50,
height: 100,
color: Colors.blue,
),
),
Positioned(
child: Container(
width: 30,
height: 50,
color: Colors.black,
),
)
],
),
運行效果如下：
注意： Stack會把內(nèi)部(寬、高)分別最大的Widget作為Stack的邊界车海，其中的所有絕對布局都按照Stackb邊界布局
`
修改紅色大小笛园，修改黃色左側(cè)絕對定位效后
Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 300,
height: 50,
color: Colors.red,
),
Positioned(
//left: 18,
//top: 15,
child: Container(
width: 100,
height: 100,
color: Colors.yellow,
),
),
Positioned(
top: 0,
left:10,
child: Container(
width: 50,
height: 100,
color: Colors.blue,
),
),
Positioned(
child: Container(
width: 30,
height: 50,
color: Colors.black,
),
)
],
),
