Flutter滑动卡片插件eazy_swipeable_cards的使用

Flutter滑动卡片插件eazy_swipeable_cards的使用

EazySwipeableCards文档

EazySwipeableCards提供了用户可以左右滑动、双击或点击的交互式卡片堆栈。这个组件非常适合用于像约会应用、表情包浏览等应用程序，其中滑动操作是用户体验的核心部分。

关键功能包括：

• 可定制的滑动动作（左滑、右滑、双击）。
• 选项卡在左右滑动时出现。
• 动态加载更多卡片的支持。
• 滑动手势动画。
• 可定制的卡片样式，包括圆角和阴影。
• 调整滑动速度触发器。
• 支持多个可见卡片堆叠。
• 使用bloc模式提高性能。
• 开发者调试支持的日志记录。

开始使用

要在您的Flutter项目中使用EazySwipeableCards组件，请首先将eazy_swipeable_cards包添加到pubspec.yaml文件中。

dependencies:
  eazy_swipeable_cards: ^1.0.0

然后导入该包：

import 'package:eazy_swipeable_cards/eazy_swipeable_cards.dart';

使用示例

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:eazy_swipeable_cards/eazy_swipeable_cards.dart';
import 'package:http/http.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'EazySwipeableCards Demo',
      theme: ThemeData.dark().copyWith(
        colorScheme: const ColorScheme.dark(),
      ),
      home: const MyHomePage(title: 'Swipeable Cards Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int counter = 0;
  SwipeableLogger logger = SwipeableLogger.instance;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: EazySwipeableCards&lt;String&gt;(
            cardWidth: 400,
            cardHeight: 400,
            shownCards: 10,
            cardDistance: 120,
            behindCardsShouldBeOpaque: false,
            cardsAnimationInMilliseconds: 250,
            onSwipeLeft: (_) {
              setState(() {
                counter--;
              });
            },
            onSwipeRight: (_) {
              setState(() {
                counter++;
              });
            },
            onDoubleTap: (_) {
              ScaffoldMessenger.of(context).showSnackBar(
                const SnackBar(content: Text('Card double-tapped!')),
              );
            },
            onSwipedLeftAppear: const Material(
              color: Colors.red,
              child: Center(
                child: Icon(
                  Icons.thumb_down,
                  size: 100,
                  color: Colors.white,
                ),
              ),
            ),
            onSwipedRightAppear: const Material(
              color: Colors.green,
              child: Center(
                child: Icon(
                  Icons.thumb_up,
                  size: 100,
                  color: Colors.white,
                ),
              ),
            ),
            borderRadius: 22.0,
            elevation: 5.0,
            pageSize: 20,
            pageThreshold: 11,
            onLoadMore: ({required pageNumber, required pageSize}) async {
              logger.log("pageNumber: $pageNumber;\tpageSize: $pageSize");
              WidgetsBinding.instance.addPostFrameCallback((_) {
                ScaffoldMessenger.maybeOf(context)?.showSnackBar(
                  SnackBar(content: Text(
                      'pageNumber: $pageNumber;\tpageSize: $pageSize')),
                );
              });
              const base = "https://meme-server.deno.dev";
              var response = await get(Uri.parse("$base/api/images"));
              var data = jsonDecode(response.body);
              List memes = List.from(data);
              return memes.map((e) =&gt; '$base${e['image']}').toList().sublist(
                    pageNumber * pageSize,
                    pageNumber * pageSize + pageSize,
                  );
            },
            builder: (String item, BuildContext _) =&gt; Image.network(
              item,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ),
    );
  }
}