Positioned简介
创建一个小组件,用于控制 [Stack] 的子项的位置。
使用场景:
可以通过坐标的形式来摆放控件的位置,堆叠布局时可以使用;
属性 | 作用 |
---|---|
width | 宽度 |
height | 高度 |
top | 顶 |
bottom | 底 |
left | 左 |
right | 右 |
注意事项:
1.如果设置了宽高,则left和right不能同时存在,top和bottom不能同时存在;
2.未设置宽高,则需要设置顶、底、左、右几个属性;
3.top、bottom、left、right 都设置为零时,则铺满全屏;
属性都为0时,则全屏铺满
Positioned(
top: 0,
bottom: 0,
left: 0,
right: 0,
child: Container(
color: ColorsUtils.randomColor(),
child: Text("1"),
),
)
顶、左都为50的间距时
Stack(
alignment: Alignment.topLeft,
children: [
Positioned(
width: 150,
height: 150,
// top: 10,
// bottom: 10,
// left: 10,
// right: 10,
child: Container(
color: ColorsUtils.randomColor(),
child: Text("1"),
),
),
Positioned(
width: 150,
height: 150,
top: 50,
// bottom: 10,
left: 50,
// right: 10,
child: Container(
color: ColorsUtils.randomColor(),
child: Text("2"),
),
),
],
)