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

怀君

于 2023-05-24 16:34:01 发布

阅读量2k

点赞数 3

文章标签： flutter

本文链接：https://blog.csdn.net/u013290250/article/details/130849986

版权

Positioned是Flutter框架中用于在Stack布局中精确控制子项位置的小组件。它可以设置width、height以及top、bottom、left、right属性来定位子项。当宽高不设时，需指定四个边缘位置；若四边都设为0，则子项会全屏铺满。示例代码展示了不同配置下的Positioned用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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