在 Flutter 的垂直轮播中滑动卡片

Question

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

Here's an animation showing exactly what I need

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

Answer 1

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

在 Flutter 的垂直轮播中滑动卡片

Swiping through cards in a vertical carousel in Flutter

carousel

dart

flutter

flutter-widget