flutter 层叠布局StackPositioned

Posted 2021-08-29 早起的年轻人

Flutter中使用Stack和Positioned来实现层叠布局效果

1 Stack

  Stack({
    Key? key,
    this.alignment = AlignmentDirectional.topStart,
    this.textDirection,
    this.fit = StackFit.loose,
    this.overflow = Overflow.clip,
    this.clipBehavior = Clip.hardEdge,
    List<Widget> children = const <Widget>[],
  })

1.1 alignment 属性

此参数决定对齐没有使用Positioned或部分定位的子widget的对齐方式，部分定位，在这里特指没有在某一个轴上定位：left、right为横轴，top、bottom为纵轴，只要包含某个轴上的一个定位属性就算在该轴上有定位。

1.2 textDirection 属性

textDirection的值为TextDirection.ltr，则alignment的start代表左，end代表右；
textDirection的值为TextDirection.rtl，则alignment的start代表右，end代表左。

1.3 fit 属性

此参数用于决定没有定位的子widget如何去适应Stack的大小。

• StackFit.loose表示使用子widget的大小
• StackFit.expand表示扩伸到Stack的大小
• StackFit.passthrough：不改变子组件约束条件

1.4 overflow

此属性决定如何显示超出Stack显示空间的子widget，值为Overflow.clip时，超出部分会被剪裁（隐藏），值为Overflow.visible 时则不会。

2 Positioned

const Positioned({
  Key key,
  this.left, 
  this.top,
  this.right,
  this.bottom,
  this.width,
  this.height,
  @required Widget child,
})

left、top 、right、 bottom分别代表离Stack左、上、右、底四边的距离。width和height用于指定定位元素的宽度和高度。

3 AnimatedPositioned

AnimatedPositioned 与 Positioned 功能类似，也是用在 Stack 中给子widget定位，不同的是当left、top 、right、 bottom值发生改变时，这个过程是动态的一个动画效果

  const AnimatedPositioned({
    Key? key,
    required this.child,
    this.left,
    this.top,
    this.right,
    this.bottom,
    this.width,
    this.height,
    Curve curve = Curves.linear,
    required Duration duration,
    VoidCallback? onEnd,
  })

如果你有兴趣 你可以关注一下公众号 biglead 来获取最新的学习资料。

• Flutter 从入门 到精通系列文章在这里
• 当然也必需是要有源码的 在这里了
• github 有点慢 不妨来看看码云的源码吧
• 系列学习教程在这里