Flutter动态堆叠卡片轮播插件 dynamic_stack_card_swiper 的使用

简介

dynamic_stack_card_swiper 是一个基于 appinio_swiper 的Flutter包，用于实现类似Tinder的卡片滑动效果。它支持在任何方向上滑动自定义小部件（无状态或有状态），并且具有非常平滑的动画效果，适用于Android、iOS和WebApp。与原版相比，此插件允许用户在已有的卡片堆栈中动态添加新的卡片。

为什么选择这个插件？

作者开发此插件的原因是他希望能够在一个已经存在卡片堆栈的情况下，仍然能够添加新的卡片到顶部，即使用户已经划过了几张卡片或者整个堆栈已经被清空。为了实现这一点，不得不移除一些原始插件的功能（如unswipe功能），但这些功能可以通过外部代码重新实现。

如何使用？

在堆栈顶部添加项目

你可以使用DynamicStackCardSwiperController<MyModel>.addCardOnTop(modelItem, direction)方法来在现有堆栈的顶部添加新项目。这里的direction参数是一个AxisDirection枚举值，允许你指定新卡片从屏幕的哪个方向加入堆栈。

访问控制器中的当前堆栈 (>= 1.2.0)

现在可以从控制器中访问当前堆栈，以便于插入新项或其他操作。

阻止特定项目向某些方向滑动 (>= 1.3.0)

可以为特定项目设置禁止滑动的方向。如果用户尝试向这些禁用的方向滑动，则会触发onSwipeUnauthorized回调函数。此外，DynamicStackCardSwiperController的滑动方法包含了一个force标志位，用来忽略或遵循这一限制条件。

安装指南

首先创建一个新的Flutter项目：

flutter create MyApp

然后，在你的pubspec.yaml文件中添加依赖：

dependencies:
  dynamic_stack_card_swiper: ^最新版本号

或者直接运行以下命令安装：

flutter pub add dynamic_stack_card_swiper

接下来，在你的库文件中导入该插件：

import 'package:dynamic_stack_card_swiper/dynamic_stack_card_swiper.dart';

使用示例

下面是一个简单的示例，展示了如何将DynamicStackCardSwiper放入Scaffold或CupertinoPageScaffold中，并定义可选参数以启用不同的特性。

import 'package:flutter/cupertino.dart';
import 'package:dynamic_stack_card_swiper/dynamic_stack_card_swiper.dart';

class Example extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: SizedBox(
        height: MediaQuery.of(context).size.height * 0.75,
        child: DynamicStackCardSwiper<String>(
          cardsBuilder: (BuildContext context, String item) {
            return Container(
              alignment: Alignment.center,
              child: Text(item),
              color: CupertinoColors.activeBlue,
            );
          },
        ),
      ),
    );
  }
}

控制器方法

控制器提供了多种方法来控制卡片的行为，例如触发默认方向的滑动、左滑、右滑、上滑、下滑、在顶部添加卡片以及根据给定偏移量进行动画等。

完整示例Demo

这里提供了一个更完整的示例，包括了如何使用控制器来管理卡片的添加与滑动行为：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dynamic Stack Card Swiper Demo')),
        body: Example(),
      ),
    );
  }
}

class Example extends StatefulWidget {
  [@override](/user/override)
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final DynamicStackCardSwiperController<String> controller =
      DynamicStackCardSwiperController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: DynamicStackCardSwiper<String>(
            controller: controller,
            cardsBuilder: (context, item) {
              return Center(child: Text(item));
            },
            items: ['Card 1', 'Card 2', 'Card 3'],
          ),
        ),
        ElevatedButton(
          onPressed: () => controller.addCardOnTop('New Card', AxisDirection.up),
          child: Text('Add New Card on Top'),
        ),
      ],
    );
  }
}