在 Flutter 中的垂直轮播中刷卡

如何解决在 Flutter 中的垂直轮播中刷卡

我正在尝试创建一个社交媒体提要，其中每个帖子都是一张不同大小的卡片，一张叠一张（几乎像一个垂直的旋转木马）。对于每张卡片，用户可以向右滑动喜欢，向左滑动不喜欢，向上滑动跳过。当用户向左或向右滑动时，底部的卡片必须出现在屏幕中央，占据其位置（将其视为 Tinder 和 Tiktok 的混合体）。

Here's an animation showing exactly what I need

我仍在学习 Flutter，不知道使用什么小部件来实现这一目标。关于如何使这项工作有任何想法？

解决方法

Dismissible 小部件应该是您所需要的

void main() {
  runApp(Screen());
}

class Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Screen1(),),);
  }
}

编辑：

class Screen1 extends StatefulWidget {
  @override
  _Screen1State createState() => _Screen1State();
}
class _Screen1State extends State<Screen1> {
  final List<Color> colors = [Colors.red,Colors.blue,Colors.yellow,Colors.green];

  @override
  Widget build(BuildContext context) {
    return PageView.builder(
        controller: PageController(viewportFraction: 0.8),scrollDirection: Axis.vertical,itemCount: colors.length,itemBuilder: (context,index) {
          return Padding(
            padding: const EdgeInsets.all(20),child: AnimatedSwitcher(
              transitionBuilder: (child,animation) {
                return SlideTransition(
                    child: child,position:
                        Tween<Offset>(begin: Offset(0,1),end: Offset(0,0)).animate(animation));
              },duration: Duration(milliseconds: 200),child: Dismissible(
                movementDuration: Duration(milliseconds: 1),resizeDuration: Duration(milliseconds: 1),onDismissed: (direction) {
                  setState(() {
                    colors.remove(colors[index]);
                  });
                },key: ValueKey(colors[index]),child: Container(
                  width: (200+index*75).toDouble(),color: colors[index],);
        });
  }
}