时间戳

首页 > 解决方案 > 在 Flutter 的垂直轮播中刷卡

flutter - 在 Flutter 的垂直轮播中刷卡

问题描述

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

这是一个动画，显示我需要什么

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

标签： flutterdartcarouselflutter-widget

解决方案

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

推荐阅读