Stack
可以允許其子widget簡單的堆疊在一起,同時它的子Widget是相對于自身的邊框定位的。
我們來看看Stack的用法
Stack(
children: <Widget>[
Container(
width: 100,
height: 100,
color: Colors.red,
),
Container(
width: 90,
height: 90,
color: Colors.green,
),
Container(
width: 80,
height: 80,
color: Colors.blue,
),
],
)
預覽效果:
圖片.png
接下來我們看下這個效果
SizedBox(
width: 250,
height: 250,
child: Stack(
children: <Widget>[
Container(
width: 250,
height: 250,
color: Colors.white,
),
Container(
padding: EdgeInsets.all(5.0),
alignment: Alignment.bottomCenter,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.black.withAlpha(0),
Colors.black12,
Colors.black45
],
),
),
child: Text(
"Foreground Text",
style: TextStyle(color: Colors.white, fontSize: 20.0),
),
),
],
),
)
預覽:
圖片.png
上面實現了一個帶漸變背景的 文本展示布局
如果要以特定模式放置多個子項,或者如果要創建自定義布局管理器,則可能需要使用CustomMultiChildLayout。特別是,使用堆棧時,無法根據大小或堆棧自身大小來定位子項