Flutter滑动卡片插件swipeable_card的使用

swipeable_card 是一个用于 Flutter 的插件，允许你创建可以滑动的卡片。这个插件非常适合用于实现类似 Tinder 的滑动卡片效果。以下是如何使用 swipeable_card 插件的基本步骤。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 swipeable_card 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  swipeable_card: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中导入 swipeable_card 插件：

import 'package:swipeable_card/swipeable_card.dart';

3. 使用 SwipeableCard

SwipeableCard 是一个可以滑动的卡片组件。你可以通过设置 onSwipeLeft 和 onSwipeRight 回调来处理滑动事件。

以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:swipeable_card/swipeable_card.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SwipeableCardExample(),
    );
  }
}

class SwipeableCardExample extends StatefulWidget {
  @override
  _SwipeableCardExampleState createState() => _SwipeableCardExampleState();
}

class _SwipeableCardExampleState extends State<SwipeableCardExample> {
  final List<String> cards = [
    'Card 1',
    'Card 2',
    'Card 3',
    'Card 4',
  ];

  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipeable Card Example'),
      ),
      body: Center(
        child: currentIndex < cards.length
            ? SwipeableCard(
                child: Card(
                  child: Center(
                    child: Text(
                      cards[currentIndex],
                      style: TextStyle(fontSize: 24),
                    ),
                  ),
                ),
                onSwipeLeft: () {
                  setState(() {
                    currentIndex++;
                  });
                  print('Swiped left');
                },
                onSwipeRight: () {
                  setState(() {
                    currentIndex++;
                  });
                  print('Swiped right');
                },
              )
            : Text('No more cards!'),
      ),
    );
  }
}

4. 解释代码

• SwipeableCard 是一个可以滑动的卡片组件。
• child 属性是卡片的内容，你可以在这里放置任何 Widget。
• onSwipeLeft 和 onSwipeRight 是滑动事件的回调函数。当用户向左或向右滑动卡片时，这些函数会被调用。
• currentIndex 用于跟踪当前显示的卡片索引。当用户滑动卡片时，currentIndex 会增加，显示下一张卡片。

5. 自定义滑动行为

你可以通过设置 swipeThreshold 和 swipeVelocityThreshold 来自定义滑动的敏感度：

SwipeableCard(
  child: Card(
    child: Center(
      child: Text(
        cards[currentIndex],
        style: TextStyle(fontSize: 24),
      ),
    ),
  ),
  onSwipeLeft: () {
    setState(() {
      currentIndex++;
    });
    print('Swiped left');
  },
  onSwipeRight: () {
    setState(() {
      currentIndex++;
    });
    print('Swiped right');
  },
  swipeThreshold: 0.5, // 滑动阈值
  swipeVelocityThreshold: 0.5, // 滑动速度阈值
),