flutter 层叠布局Stack、Positioned

最新推荐文章于 2024-05-31 23:13:56 发布

早起的年轻人

最新推荐文章于 2024-05-31 23:13:56 发布

阅读量1.4k

点赞数

分类专栏： Flutter项目开发全套教程文章标签： android flutter ios

本文链接：https://blog.csdn.net/zl18603543572/article/details/119232058

版权

Flutter项目开发全套教程专栏收录该内容

265 篇文章 387 订阅

订阅专栏

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,
  })