定位布局 Stack 层叠组件 Stack 与 Align Stack 与 Positioned 实现
一、Flutter Stack 组件
Stack 表示堆的意思，我们可以用 Stack 或者 Stack 结合 Align 或者 Stack 结合 Positiond 来实现页面的定位布局
alignment 配置所有子元素的显示位置
children 子组件
二、Flutter Stack Align
Stack 组件中结合 Align 组件可以控制每个子元素的显示位置
alignment 配置所有子元素的显示位置
child 子组件
三、Flutter Stack Positioned
Stack 组件中结合 Positioned 组件也可以控制每个子元素的显示位置
top 子元素距离顶部的距离
bottom 子元素距离底部的距离
left 子元素距离左侧距离
right 子元素距离右侧距离
child 子组件
案例
Positioned定位
return Container(
width: 200, height: 200, decoration: BoxDecoration( color: Colors.red ), child: Stack( children: <Widget>[ Positioned(child: Icon(Icons.print),), Positioned(right: 0, child: Icon(Icons.map),), Positioned(bottom: 0, child: Icon(Icons.search),), ], ));
Align定位
return Container( width: 200, height: 200, decoration: BoxDecoration( color: Colors.red ), child: Stack( children: <Widget>[ Align(alignment: Alignment.center, child: Icon(Icons.print),), Align(alignment: Alignment.bottomLeft, child: Icon(Icons.map),), Align(alignment: Alignment.bottomRight, child: Icon(Icons.search),), ], ));