Flutter Stack 层叠组件
在介绍Stack 层叠组件时，顺便带上Align**和Positioned**，以及组合使用
参数详解
Stack
属性说明
alignment布局定位 默认 AlignmentDirectional.topStart我们也可以直接传入参数，自定义位置（值在1与-1之间），如：alignment: Alignment(0.5,0.5),textDirection正反排序TextDirection.ltrTextDirection.rtlfit默认StackFit.looseoverflow默认Overflow.clipchildren子元素
代码示例
Stack 层叠组件顾名思义，层叠在一起，默认左上角堆叠。
//只用Stack 层叠组件，alignment属性是统一控制子组件（子组件多了没办法分开的）
class MyBody extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
width: 300,
height: 300,
color: Colors.red,
),
Text('我是文本一'),
Text('我是文本一十一'),
Text('我是文本一百一十一'),
Text('我是文本一千一百一十一'),
],
);
}
}
123456789101112131415161718192021
Align
属性说明
alignment布局定位widthFactor如果为非null，则将其高度设置为子高度乘以此系数。必须为正数heightFactor如果为非null，则将其宽度设置为子宽度乘以此系数。必须为正数child子元素
使用Stack与Align 实现定位布局
class MyBodyB extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
color: Colors.red,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment(-1,-1),
child: Text('我是文本一'),
),
Align(
alignment: Alignment(-0.7,-0.8),
child: Text('我是文本一十一'),
),
Align(
alignment: Alignment(-0.5,-0.6),
child: Text('我是文本一百一十一'),
),
Align(
alignment: Alignment(-0.3,-0.4),
child: Text('我是文本一千一百一十一'),
),
],
),
);
}
}
12345678910111213141516171819202122232425262728293031
Positioned
属性说明
left左边距top上边距right右边距bottom下边距width子元素宽height子元素高child子元素
使用Stack与Positioned实现定位布局
class MyBodyC extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
width: 300,
height: 300,
color: Colors.red,
child: Stack(
children: <Widget>[
Positioned(
child: Text('我是文本一'),
),
Positioned(
left: 100,
top: 30,
child: Text('我是文本一十一'),
),
Positioned(
left: 150,
top: 50,
child: Text('我是文本一百一十一'),
),
Positioned(
left: 10,
bottom: 10,
child: Text('我是文本一千一百一十一'),
),
],
),
);
}
}
123456789101112131415161718192021222324252627282930313233343536
