【Flutter 组件集录】Positioned | 8 月更文挑战

前言：

这是我参与8月更文挑战的第 24 天，活动详情查看：8月更文挑战。为应掘金的八月更文挑战，我准备在本月挑选 31 个以前没有介绍过的组件，进行全面分析和属性介绍。这些文章将来会作为 Flutter 组件集录 的重要素材。希望可以坚持下去，你的支持将是我最大的动力~

1.认识 Positioned 组件

Positioned 组件一般只用于 Stack 组件中，源码中对它的介绍是：一个可以控制 Stack 子组件位置的组件。

下面是 Positioned 组件类的定义和 构造方法，可以看出它继承自 ParentDataWidget<StackParentData> 。有 左上右下宽 高六个属性。通过断言可以看出 左右宽 不可同时为 null， 上下高 不可同时为 null。且 child 参数是必须传入的。

之前介绍的 Flexible 也 ParentDataWidget 类型的组件，它只能用于 Flex 组件中。可以看出 ParentDataWidget 可以限定组件的使用范围。

2. Positioned 组件的使用

我们可以通过 左上右下 控制子组件相对于 Stack 组件区域的偏移量，这些数值可为负数。当超越 Stack 区域后，如果想要显示，需要设置 clipBehavior: Clip.none ，否则出界的将会被裁剪。

class PositionedDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.grey.withAlpha(33),
          constraints: BoxConstraints.tightFor(width: 200, height: 150),
          child: Stack(
            clipBehavior: Clip.none,
            children: <Widget>[
              Container(width: 100, height:100,color: Colors.red),
              Positioned(
                  left: -12,
                  top: -12,
                  child: Icon(Icons.ac_unit, color: Colors.black)),
              Positioned(
                  bottom: 20,
                  right: 10,
                  child: Icon(Icons.ac_unit, color: Colors.green))
            ],
          ),
    );
  }
}
复制代码

至于宽高，是用于确定 Positioned 的尺寸大小，如下将绿色图标对应的 Positioned 宽高设置为 120*150 。可见，偏移量是根据 Positioned 的尺寸区域进行偏移的。

class PositionedDemo extends StatelessWidget {
 ... 略同
      Positioned(
          bottom: 20,
          right: 10,
          width: 120,
          height: 150,
          child: Icon(Icons.ac_unit, color: Colors.green))
    ],
复制代码

3.Positioned 组件的下的约束特性

下面的案例中，通过 Positioned 组件嵌套绿色，红色不嵌套，且它们都没有高度。想一下，红色 Container 是否可以显示？绿色 Container 是否可以显示？

结果可以看出，红色被拉伸填充，绿色不显示。其中有着怎样的科学道理呢？

可以看出，包裹 Positioned 组件后，由于 Container 未指定高度，高度没有约束。

未包裹 Positioned 组件的 Container ，会受到 Stack 的约束。

通过 LayoutBuilder 可以查看一下 Positioned 组件下的约束情况，如下，可以看出， Positioned 组件下是无约束的，这也是 Container 未指定高度，高度为 0 的根本原因。

3. Positioned 组件只能用在 Stack 中吗？

如果 Positioned 用在别处，就会出现如下的异常：

严格意义上来说，Positioned 并不是只能用在 Stack 组件内。决定Positioned 组件可以用在 Stack 组件下的本质原因是 RenderStack 混入了 ContainerRenderObjectMixin<RenderBox, StackParentData> 。

也就是说，如果别的渲染对象混入了 ContainerRenderObjectMixin<RenderBox, StackParentData> ，其内部也是可以用 Positioned 组件的。比如 _RenderTheatre ，这个渲染对象对应的组件是 _Theatre。用于 Overlay 组件中。

也就是说在 Overlay 组件中，我们也可以使用 Positioned 组件进行定位。那本文到这里就结束了，谢谢观看，明天见~