如何使堆叠的卡片动画以彼此落后

Posted 2023-02-23

【中文标题】如何使堆叠的卡片动画以彼此落后

【英文标题】：How to make stacked cards animate to go behind each other

【发布时间】：2021-03-23 19:25:56

【问题描述】：

我正在尝试制作一个只有 2 个项目的 PageView。但我想看看第一张背后的牌。当它向右滑动时，我希望它动画到后面，后面的卡片动画到前面。

我找到了类似的解决方案，但不完全是， Flutter Swiper。它确实让我可以看到后面的卡片，但它并没有我想要的那么多，而且它没有动画到后面而是它只是消失在右边。另外，我想让它在右侧而不是左侧“弹出”。

任何帮助都有助于为我指明方向。谢谢。

【参考方案1】：

只需在需要时更改Stack 的孩子的顺序：

var children = <Widget>[Widget1(), Widget2()];
Stack(
  children: children,
)

当Widget2()的位置动画到边缘时：

setState(()
  children = <Widget>[Widget2(), Widget1()];
);

【讨论】：

我将如何对边缘部分进行动画处理？

使用Positioned()小部件