在介绍Stack 层叠组件时,顺便带上Align和Positioned,以及组合使用
参数详解
Stack
属性 | 说明 |
alignment | 布局定位 默认 AlignmentDirectional.topStart 我们也可以直接传入参数,自定义位置(值在1与-1之间),如:alignment: Alignment(0.5,0.5), |
textDirection | 正反排序 TextDirection.ltr TextDirection.rtl |
fit | 默认StackFit.loose |
overflow | 默认Overflow.clip |
children | 子元素 |
Align
属性 | 说明 |
alignment | 布局定位 |
widthFactor | 如果为非null,则将其高度设置为子高度乘以此系数。必须为正数 |
heightFactor | 如果为非null,则将其宽度设置为子宽度乘以此系数。必须为正数 |
child | 子元素 |
Positioned
属性 | 说明 |
left | 左边距 |
top | 上边距 |
right | 右边距 |
bottom | 下边距 |
width | 子元素宽 |
height | 子元素高 |
child | 子元素 |
代码示例
Stack 层叠组件顾名思义,层叠在一起,默认左上角堆叠。
只使用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('我是文本一千一百一十一'),
],
);
}
}
使用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('我是文本一千一百一十一'),
),
],
),
);
}
}
使用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('我是文本一千一百一十一'),
),
],
),
);
}
}
效果图
只使用Stack 层叠组件
使用Stack与Align 实现定位布局
使用Stack与Positioned实现定位布局