Positioned
组件一般只用于 Stack
组件中,源码中对它的介绍是:一个可以控制 Stack
子组件位置的组件。
下面是 Positioned
组件类的定义
和 构造方法
,可以看出它继承自 ParentDataWidget<StackParentData>
。有 左上右下宽
高六个属性。通过断言可以看出 左右宽
不可同时为 null
, 上下高
不可同时为 null
。且 child
参数是必须传入的。
之前介绍的 Flexible 也 ParentDataWidget
类型的组件,它只能用于 Flex
组件中。可以看出 ParentDataWidget
可以限定组件的使用范围。
我们可以通过 左上右下
控制子组件相对于 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))
],
下面的案例中,通过 Positioned
组件嵌套绿色,红色不嵌套,且它们都没有高度。想一下,红色 Container
是否可以显示?绿色 Container
是否可以显示?
结果可以看出,红色被拉伸填充,绿色不显示。其中有着怎样的科学道理呢?
可以看出,包裹 Positioned
组件后,由于 Container
未指定高度,高度没有约束。
未包裹 Positioned
组件的 Container
,会受到 Stack
的约束。
通过 LayoutBuilder
可以查看一下 Positioned
组件下的约束情况,如下,可以看出, Positioned
组件下是无约束的,这也是 Container
未指定高度,高度为 0 的根本原因。
如果 Positioned
用在别处,就会出现如下的异常:
严格意义上来说,Positioned
并不是只能用在 Stack
组件内。决定Positioned
组件可以用在 Stack
组件下的本质原因是 RenderStack
混入了 ContainerRenderObjectMixin<RenderBox, StackParentData>
。
也就是说,如果别的渲染对象混入了 ContainerRenderObjectMixin<RenderBox, StackParentData>
,其内部也是可以用 Positioned
组件的。比如 _RenderTheatre
,这个渲染对象对应的组件是 _Theatre
。用于 Overlay
组件中。
也就是说在 Overlay
组件中,我们也可以使用 Positioned
组件进行定位。那本文到这里就结束了,谢谢观看,明天见~