## Stack组件 Stack表示堆，我们可以用Stack或者结合Align，Stack结合Positioned来实现页面的定位布局 * alignment：配置所有子元素的显示位置 * children：子组件 **Stack是相对于外部容器定位的** ~~~ Stack( // alignment表示让里面所有的元素都居中 alignment: Alignment.bottomLeft, children: <Widget>[ // children的堆叠顺序，影响内容的展示（z-index） Container( height: 400, width: 300, color: Colors.red, ), Text("我是一个文本1",style: TextStyle( fontSize: 40, color: Colors.white ),), Text("我是一个文本2") ], ), ~~~ alignment自己指定方位 // alignment表示让里面所有的元素都居于某个位置 // x,y 从-1 到1 ~~~ alignment: Alignment(0, \-1), ~~~ ## Stack Align 控制每个子元素的显示位置 * alignment：配置所有子元素的显示位置 * children：子组件 ~~~ Center( child: Container( height: 400, width: 300, color: Colors.red, // Stack是相对于外部容器定位的 child: Stack( alignment: Alignment(0, -1), children: <Widget>[ Align( alignment: Alignment.topLeft, child: Icon(Icons.home,size: 60,color: Colors.white) , ), Align( alignment: Alignment.center, child: Icon(Icons.search,size: 40,color: Colors.blue), ), Align( alignment: Alignment.bottomRight, child: Icon(Icons.settings,size: 30,color: Colors.orange), ), ], ), ), ) ~~~ ## Stack Positioned * top：子元素距离顶部的距离 * bottom：底部 * left * right * child：子组件 ~~~ Center( child: Container( height: 400, width: 300, color: Colors.red, // Stack是相对于外部容器定位的 child: Stack( alignment: Alignment(0, -1), children: <Widget>[ Positioned( left: 10, child: Icon(Icons.home,size: 60,color: Colors.white) , ), Positioned( bottom: 0, left: 10, child: Icon(Icons.search,size: 40,color: Colors.blue), ), Positioned( right: 0, child: Icon(Icons.settings,size: 30,color: Colors.orange), ), ], ), ), ) ~~~ 例子： ~~~ Container( height: 200, width: 300, color: Colors.red, // Stack是相对于外部容器定位的 child: Stack( alignment: Alignment(0, -1), children: <Widget>[ Container( height: 200, width: 300, child: Image.network("https://www.itying.com/images/flutter/1.png",fit: BoxFit.cover,), ), Align( alignment: Alignment.bottomCenter, child: Container( padding: EdgeInsets.fromLTRB(0, 0, 0, 10), child: Text("图片说明",style: TextStyle(fontSize: 20),), ), ), ], ), ) ~~~