swipe_cards pub package

一个用于 Tinder 式滑动卡片的 Flutter 小部件。卡片可以向右、向左和向上滑动以获得不同的响应。目前它支持以下响应

  • 向右滑动表示喜欢
  • 向左滑动表示不喜欢
  • 向上滑动表示超级喜欢

安装

要安装该软件包，请将以下依赖项添加到您的 pubspec.yaml

dependencies:
  swipe_cards: ^1.0.0

用法

基础

import 'package:swipe_cards/swipe_cards.dart';

SwipeCards(
            matchEngine: <MatchEngine>,
            itemBuilder: (BuildContext context, int index) {},
            onStackFinished: () {},
            itemChanged: (SwipeItem item, int index) {},
            upSwipeAllowed: <bool>,
            fillSpace: <bool>,
);

SwipeCards 的属性

按键 描述
matchEngine MatchEngine 的实例，作为手动触发滑动的控制器。
itemBuilder 返回滑动卡片内视图的函数。
onStackFinished 一旦所有卡片都被滑动，就会触发一个函数。
itemChanged 当堆栈中的项目发生更改（移动到下一张卡片）时触发的函数。
upSwipeAllowed 启用/禁用向上滑动。（默认值：false）
fillSpace 配置天气是否填充空间。（默认值：true）

MatchEngine

MatchEngine 是滑动卡片的控制器。它以 swipeItems 作为参数，用于手动触发滑动，例如在按钮按下时。swipeItems 的数据类型是 List<SwipeItem>。

MatchEngine _matchEngine = MatchEngine(swipeItems: List<SwipeItem>);

MatchEngine 中的函数

按键 描述
_matchEngine.currentItem.like(); 手动触发向右滑动。
_matchEngine.currentItem.nope(); 手动触发向左滑动。
_matchEngine.currentItem.superLike(); 手动触发向上滑动。

SwipeItem

SwipeItem 包含可以渲染在滑动卡片中的实际数据。实际上，它是一个任何动态对象的包装器，只是为该对象添加了喜欢、不喜欢和超级喜欢的功能。

SwipeItem(
            content: "Anup Kumar Panwar",
            likeAction: () {
                log("Like");
            },
            nopeAction: () {
                log("Nope");
            },
            superlikeAction: () {
                log("Superlike");
            },
            onSlideUpdate: (SlideRegion? region){
                log("Region $region");
            }
);

SwipeItem 的属性

按键 描述
content 包含要在滑动卡片中渲染的实际数据的对象。
likeAction 喜欢卡片时触发的函数。
nopeAction 不喜欢/向左滑动卡片时触发的函数。
superlikeAction 超级喜欢卡片时触发的函数。
onSlideUpdate 拖动卡片时触发的函数，并告知卡片的当前区域。

示例

List<SwipeItem> _swipeItems = List<SwipeItem>();
  MatchEngine _matchEngine;
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  List<String> _names = ["Red", "Blue", "Green", "Yellow", "Orange"];
  List<Color> _colors = [
    Colors.red,
    Colors.blue,
    Colors.green,
    Colors.yellow,
    Colors.orange
  ];

  @override
  void initState() {
    for (int i = 0; i < _names.length; i++) {
      _swipeItems.add(SwipeItem(
          content: Content(text: _names[i], color: _colors[i]),
          likeAction: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Liked ${_names[i]}"),
              duration: Duration(milliseconds: 500),
            ));
          },
          nopeAction: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Nope ${_names[i]}"),
              duration: Duration(milliseconds: 500),
            ));
          },
          superlikeAction: () {
            _scaffoldKey.currentState.showSnackBar(SnackBar(
              content: Text("Superliked ${_names[i]}"),
              duration: Duration(milliseconds: 500),
            ));
          },
          onSlideUpdate: (SlideRegion? region) async {
            print("Region $region");
          }));
    }

    _matchEngine = MatchEngine(swipeItems: _swipeItems);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
            child: Column(children: [
          Container(
            height: 550,
            child: SwipeCards(
              matchEngine: _matchEngine,
              itemBuilder: (BuildContext context, int index) {
                return Container(
                  alignment: Alignment.center,
                  color: _swipeItems[index].content.color,
                  child: Text(
                    _swipeItems[index].content.text,
                    style: TextStyle(fontSize: 100),
                  ),
                );
                  },
                  onStackFinished: () {
                    _scaffoldKey.currentState.showSnackBar(SnackBar(
                      content: Text("Stack Finished"),
                      duration: Duration(milliseconds: 500),
                    ));
                  },
                  itemChanged: (SwipeItem item, int index) {
                    print("item: ${item.content.text}, index: $index");
                  },
                  upSwipeAllowed: true,
                  fillSpace: true,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  RaisedButton(
                      onPressed: () {
                        _matchEngine.currentItem.nope();
                      },
                      child: Text("Nope")),
                  RaisedButton(
                      onPressed: () {
                        _matchEngine.currentItem.superLike();
                      },
                      child: Text("Superlike")),
                  RaisedButton(
                      onPressed: () {
                        _matchEngine.currentItem.like();
                      },
                      child: Text("Like"))
                ],
              )
            ])));
  }


  class Content {
    final String text;
    final Color color;

    Content({this.text, this.color});
  }

截图

Screenshot

GitHub

查看 Github