Flutter——最详细(Positioned)使用教程

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"),
            ),
          ),
        ],
      )