Stack是用來疊放組件的一種布局樣式周荐，我們看一段demo
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Stack(
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
FlutterLogo(size: 50,)
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: const Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
運(yùn)行后效果如下
通過這個(gè)簡單的demo 我們可以看出Stack 的布局是子組件按照先后順序一個(gè)一個(gè)往上疊加顯示辛萍。
Stack對齊方式
Stack的對齊方式默認(rèn)是topLeft，左上角對齊羡藐，子組件層層往上疊加贩毕。對齊方式可以通過alignment參數(shù)來調(diào)整topCenter、topRight仆嗦、bottomLeft等等辉阶，根據(jù)自己的需要去設(shè)置就好。
Stack的實(shí)際大小
Stack的實(shí)際大小是跟Stack包含了哪些子組件相關(guān)的瘩扼，分為三大類一類是包含Positioned 子組件谆甜，一類是不包含Positioned子組件，一類是全是Postioned子組件
包含Positioned 子組件的Stack
Stack會計(jì)算出所有非Positioned組件中的最大尺寸的組件集绰，Stack會把自己的尺寸設(shè)置成這個(gè)最大組件的尺寸规辱，也就是說Positioned組件不會影響Stack本身尺寸的大小
不包含Positioned子組件的Stack
Stack會把自己的尺寸設(shè)置成最大子組件的尺寸。
全是Postioned子組件的Stack
Stack會把自己的尺寸設(shè)置的盡可能的大栽燕，因?yàn)樗械慕M件都是Postioned子組件罕袋，沒有參照物，所以就把自己設(shè)置的越大越好碍岔，這樣設(shè)計(jì)是為了讓Postioned組件方便設(shè)置位置浴讯，
fit屬性對Stack大小的影響
fit 屬性默認(rèn)值StackFit.loose，是一個(gè)寬松的約束蔼啦，Stack允許子組件的大小在0到Stack本上尺寸的上限之間稍微小一點(diǎn)榆纽。
StackFit.expand，要求子組件填滿Stack上級約束的空間捏肢。并不是Stack直接把自己按照上級約束設(shè)置自己的空間大小
StackFit.passthrough 是把Stack上級的約束直接傳給Stack子組件奈籽，子組件按照上級的約束設(shè)置自己的尺寸大小。
Stack 溢出問題
Stack子組件的width 或 height 有可能超出Stack 本身的大小鸵赫，Stack 的clipBehavior 屬性可以控制子組件超出Stack部分的是否顯示衣屏，clipBehavior: Clip.hardEdge, 是Stack 的默認(rèn)行為，超出Stack 部分會被裁剪掉奉瘤。clipBehavior: Clip.none 超出Stack部分是不會被裁剪的會顯示出來勾拉，但是需要注意的是，超出的部分是不會響應(yīng)點(diǎn)擊事件的盗温，這是由于flutter 的框架決定的藕赞，因?yàn)槌龅牟糠植辉赟tack 范圍內(nèi)，點(diǎn)擊的區(qū)域在Stack區(qū)域內(nèi)，才會將事件傳遞給Stack的子組件，然后層層傳遞直到找到響應(yīng)的組件跨细。
