开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 18 天，点击查看活动详情
层叠布局在移动开发中很常见，几乎大多数app都会有这样的使用场景，所谓的层叠布局，其实就是一个视图可以叠加在另一个视图上面或者下面，而不是按顺序排列。Flutter中使用Stack和Positioned来配合实现绝对定位。Stack允许子组件堆叠，而Positioned用于根据Stack的四个角来确定子组件的位置。
Stack
Stack({
//决定如果去对齐没有定位（未使用Positioned）或部分定位的子组件。所谓部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性，就算在该轴上有定位。
this.alignment = AlignmentDirectional.topStart,
//和Row、Wrap一样，用于确定内容显示顺序
this.textDirection,
//用于确定没有定位的子组件如果去适应Stack的大小。StackFit.loose表示使用子组件的大小，StackFit.expand 表示扩伸到Stack的大小。
this.fit = StackFit.loose,
//对超出Stack显示空间的部分如果剪裁，Clip是一个枚举类，里面定义了各种裁剪方式，如：Clip.hardEdge表示直接裁剪，不应用抗锯齿。
this.clipBehavior = Clip.hardEdge,
List<Widget> children = const <Widget>[],
})
Positioned
const Positioned({
Key? key,
this.left,
this.top,
this.right,
this.bottom,
this.width,
this.height,
required Widget child,
})
//left、top、right、bottom、width、height类似于iOS的masonry的使用方式
//注意：Positioned的Width、height和其他地方的意义有点区别，此处用于配合left、top、right、bottom来定位组件。区别是，left、right、width三个属性中只能确定其中的两个，系统会自动计算另外一个，如果都指定会报错，top、height、bottom同上。
实例：
ConstrainedBox(
constraints: BoxConstraints.expand(),
//fit: StackFit.expand, //未定位widget占满Stack整个空间
child: Stack(
alignment:Alignment.center , //指定未定位或部分定位widget的对齐方式
children: <Widget>[
Container(//未指定横轴定位，会采用Alignment.center属性。
child: Text("Hello world",style: TextStyle(color: Colors.white)),
color: Colors.red,
),
Positioned(
left: 18.0,//指定来横轴属性，采用left属性
child: Text("I am Jack"),
),
Positioned(
top: 18.0,//指定纵轴属性，未指定横轴属性，采用Alignment.center和top属性
child: Text("Your friend"),
)
],
),
);
Stack(
alignment:Alignment.center ,
fit: StackFit.expand, //未定位widget占满Stack整个空间
children: <Widget>[
Positioned(
left: 18.0,
child: Text("I am Jack"),
),
Container(child: Text("Hello world",style: TextStyle(color: Colors.white)),//未指定定位，会铺满，然后遮盖上一个组件
color: Colors.red,
),
Positioned(
top: 18.0,
child: Text("Your friend"),
)
],
),
