文章目录
  1. 1. Stack
  2. 2. Positioned

层叠布局,类似 Android 的 FrameLayout,根据父容器的四个角来确定本身的位置

Flutter 中 Stack 实现堆叠,Positioned 实现对 Widget 定位

Stack

  • alignment 如何对齐 left、right、top、bottom
  • textDirection 对齐的参考系
  • fit 没有定位的 Children 如何适应大小 StackFit.loose 表示使用 Widget 大小,StackFit.expand 表示扩展到 Stack 的大小
  • overflow 决定超出容器的 Children 如何显示,Overflow.clip 超出部分被剪裁,Overflow.visible 显示超出的 Children

Positioned

left、top、right、bottom 表示离 Stack 四边的距离,width、height 表示定位元素的长宽

1
2
3
4
5
6
7
8
9
10
11
12
ConstrainedBox(
constraints: BoxConstraints.expand(), child: Stack(
overflow: Overflow.visible,
alignment: Alignment.topLeft,
children: <Widget>[
Ball(30, Colors.blue),
Positioned(
bottom: 20,
child: Ball(35, Colors.red),
)],
)
)
文章目录
  1. 1. Stack
  2. 2. Positioned