1.alignment布局
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment(0, -1.0),
children: <Widget>[
Container(
color: Colors.white,
width: 200,
height: 200,
),
Container(
color: Colors.red,
width: 100,
height: 100,
),
Container(
color: Colors.blue,
width: 50,
height: 50,
),
],
);
}
}
效果图：
image
2.Positioned布局
class StackDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Positioned(
child: Container(
color: Colors.white,
width: 200,
height: 200,
),
),
Positioned(
right: 0,
child: Container(
color: Colors.red,
width: 100,
height: 100,
),
),
Positioned(
left: 10,
top: 30,
child: Container(
color: Colors.blue,
width: 50,
height: 50,
),
),
],
);
}
}
效果图：
image
3.AspectRatio 宽高比布局
随父部件的大小进行等比例显示
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.yellow,
//取值 -1 ~ 1 比例 显示位置
alignment: Alignment(0, 0),
child: Container(
color: Colors.blue,
width: 200,
child: AspectRatio(aspectRatio: 2/1,child: Icon(Icons.add,size: 30,),),
));
}
}
效果图：
image
补充
stack设置为overflow：visible之后，内部的元素中超出的部分就不能触发点击事件；所以尽量避免这种布局
