Flutter卡片滑动插件swipe_deck的使用

Flutter卡片滑动插件swipe_deck的使用

Swipe Deck 是一个简单的Flutter包，用于模仿iMessage图像选择器的功能。它允许你将一组小部件以可滑动的方式展示。

当前功能

  • 添加一组小部件以在可滑动的卡片组中展示。
  • 基本的小部件自定义。

示例演示

Swipe Deck Demo

使用方法

要使用这个插件，只需将你想要添加到卡片组中的小部件包裹在 SwipeDeck 小部件中：

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

const IMAGES = ["apex", "cod", "destiny", "fc3", "game_4", "ghost", "mk11", "nfs", "pubg", "mk112"];
final borderRadius = BorderRadius.circular(20.0);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Swipe Deck',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  const TestPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Swipe Deck"),
      ),
      body: Center(
        child: Container(
          width: 600,
          child: Center(
            child: SwipeDeck(
              startIndex: 3, // 设置初始显示的索引
              emptyIndicator: Container(
                child: Center(
                  child: Text("Nothing Here"),
                ),
              ),
              cardSpreadInDegrees: 5, // 调整背景卡片的展开角度
              onSwipeLeft: (){
                print("USER SWIPED LEFT -> GOING TO NEXT WIDGET");
              },
              onSwipeRight: (){
                print("USER SWIPED RIGHT -> GOING TO PREVIOUS WIDGET");
              },
              onChange: (index){
                print(IMAGES[index]);
              },
              widgets: IMAGES.map((e) => GestureDetector(
                    onTap: () {
                      print(e);
                    },
                    child: ClipRRect(
                        borderRadius: borderRadius,
                        child: Image.asset(
                          "assets/images/$e.jpg",
                          fit: BoxFit.cover,
                        )),
                  ))
                  .toList(),
            ),
          ),
        ),
      ),
    );
  }
}

主要参数说明

  • startIndex: 初始显示的卡片索引。
  • emptyIndicator: 当没有卡片时显示的内容。
  • cardSpreadInDegrees: 控制背景卡片的展开角度。
  • onSwipeLeft: 用户向左滑动时触发的回调。
  • onSwipeRight: 用户向右滑动时触发的回调。
  • onChange: 每当卡片改变时触发的回调。
  • widgets: 需要展示的一组小部件。

社交链接

发现有用？

如果觉得这个插件有用，可以通过Buy Me A Coffee支持开发者。

许可证

此项目采用MIT许可证。

以上内容详细介绍了如何使用 `swipe_deck` 插件，并提供了一个完整的示例代码来帮助你快速上手。希望这些信息对你有所帮助！

更多关于Flutter卡片滑动插件swipe_deck的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter卡片滑动插件swipe_deck的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter中使用swipe_deck插件的示例代码。swipe_deck是一个用于创建卡片滑动效果的插件，非常适合实现Tinder风格的卡片滑动界面。

首先，确保你的Flutter项目已经添加了swipe_deck依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  swipe_deck: ^2.0.1  # 请检查最新版本号并替换

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例，展示如何使用swipe_deck插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Swipe Deck Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

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

  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe Deck Example'),
      ),
      body: Center(
        child: SwipeDeck(
          cards: cards.map((card) => CardItem(card)).toList(),
          numVisibleCards: 1,
          onCardSwiped: (index) {
            setState(() {
              _currentIndex = index;
            });
            print('Card ${_currentIndex + 1} swiped!');
            // 可以在这里添加逻辑处理，例如移除已滑动的卡片
          },
          onDeckEmpty: () {
            print('All cards swiped!');
            // 可以在这里添加逻辑处理，例如显示加载更多按钮
          },
          onCardActionDown: (index) {
            print('Card ${_currentIndex + 1} action down!');
          },
          onCardActionUp: (index) {
            print('Card ${_currentIndex + 1} action up!');
          },
          onCardAction: (index) {
            print('Card ${_currentIndex + 1} action!');
          },
          cardBuilder: (context, cardData) {
            return Card(
              child: Center(
                child: Text(cardData),
              ),
            );
          },
        ),
      ),
    );
  }
}

class CardItem {
  final String title;

  CardItem(this.title);

  @override
  String toString() {
    return title;
  }
}

在这个示例中：

  1. SwipeDeck组件接受一个卡片列表cards，每个卡片数据被映射为CardItem对象。
  2. numVisibleCards参数设置每次可见的卡片数量。
  3. onCardSwiped回调在卡片被滑动时触发，这里我们简单地打印了被滑动的卡片索引。
  4. cardBuilder用于构建每个卡片的UI。

你可以根据需求进一步自定义卡片样式和滑动逻辑。这个示例只是一个起点，swipe_deck插件还提供了更多的参数和回调供你使用，以便实现更复杂的功能。

回到顶部