滑卡牌组

一个用于通过手势或按钮滑动卡牌组的组件。

这个包的灵感来自于我试图开发一个类似 Tinder 的应用
涉及向左或向右滑动选项。我曾以为会有一个包
存在于如此流行的功能中,但我搜索了互联网,只找到
了不同实现的零散部分,这些实现令人困惑、
复杂,而且非常糟糕。这个包旨在成为一个易于使用且
可定制的方式来实现该功能,并有望为您节省
大量时间!

SwipingCardDeck Demonstration

功能

SwipingCardDeck 组件提供了多种独特的功能

  • 通过拖动或使用按钮滑动卡片,并接入公共的
    swipeLeft 和 swipeRight 函数。
  • 为牌组为空和每个滑动方向提供自定义回调函数,
    回调函数还会传入原始卡片对象。
  • 使用任何形状、大小或内容的自定义卡片。
  • 通过一次渲染顶部的两张卡片来优化性能,允许大型
    牌组而不会降低用户体验。
  • 各种暴露的属性允许创建适合任何需求的滑动体验。
    非常适合任何类似 Tinder 的决策制定应用程序。
  • 该包的当前限制

仅接受 Card 小部件列表。

  • 仅支持水平滑动,不支持垂直滑动。
  • 创建一个带有两张卡片和两个按钮的 SwipingCardDeck,

用法

这些按钮可用于滑动。回调函数会打印调试信息。可选
参数 minimumVelocity、rotationFactor 和 swipeThreshold,
但它们被设置为对大多数用例都有效的默认值。
问题和建议

SwipingCardDeck(
    cardDeck: <Card>[
        Card(
            color: Colors.red,
            child: const SizedBox(height: 300, width: 200,)
        ),
        Card(
            color: Colors.green,
            child: const SizedBox(height: 300, width: 200,)
        ),
    ],
    onDeckEmpty: () => debugPrint("Card deck empty"),
    onLeftSwipe: (Card card) => debugPrint("Swiped left!"),
    onRightSwipe: (Card card) => debugPrint("Swiped right!"),
    swipeThreshold: MediaQuery.of(context).size.width / 4,
    minimumVelocity: 1000,
    cardWidth: 200,
    rotationFactor: 0.8 / 3.14;
);

附加信息

该包正在积极维护和开发中。要提交想法、

问题或建议,请在
GitHub 存储库
中创建一个问题。.

贡献

感谢您对贡献的兴趣!要开始,请阅读
CONTRIBUTING 中的文档。
总有新的问题出现,所以请经常回来查看,如果您想
处理某件事但没有相关问题,请自己创建一个!

GitHub

查看 Github