????????層疊布局也可以稱為相對布局,子Widget根據父容器的相對位置來確定布局,好比iOS中的AutoLayout,不過Flutter中是相對于父Widget,而AutoLayout不僅可以相對于父控件設置相對位置,還可以參考兄弟控件設置位置.Flutter中使用Stack和Positioned來實現子Widget的位置,Stack允許子Widget堆疊,Positioned可以給子Widget實現定位.
Stack
Stack({
Key key,
this.alignment = AlignmentDirectional.topStart,
this.textDirection,
this.fit = StackFit.loose,
this.overflow = Overflow.clip,
List<Widget> children = const <Widget>[],
})
alignment:表示如何在某一軸上定位沒有使用Positioned的子Widget;
textDirection:和Row,Wrap中textDirection功能一樣,表示文字的從哪個方向開始;
fit:表示在沒有使用Positioned的子Widget如何適應Stack的大小.StackFit.loose表示使用子Widget的大小,StackFit.expand表示擴展到Stack的大小.
overflow:表示子Widget如果有越界表示如何處理,Overflow.clip表示越界被裁剪;Overflow.visible表示越界正常顯示,不裁剪.
Positioned
const Positioned({
Key key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
@required Widget child,
})
top,left,bottom,right指的是子Widget距離Stack上,左,下,右的距離,width,height指的是子Widget的寬高.
基本使用:
ConstrainedBox(
constraints: BoxConstraints.expand(),
child: Stack(
fit: StackFit.loose,
alignment: Alignment.center,
children: <Widget>[
Container(
child: Text("Hello Flutter",
style: TextStyle(fontSize: 20.0),
),
color: Colors.green,
height: 50.0,
),
Positioned(
left: 20.0,
top: 80.0,
right: 120.0,
height: 60.0,
child: Text("Text 1",
style: TextStyle(
backgroundColor: Colors.red
),
),
),
],
),
),
Stack
