swipe_stack_null_safe 是一个用于 Flutter 的插件，它允许你创建一个可以滑动堆叠的卡片组件。每个卡片可以通过滑动手势（如向左、向右滑动）来移除，并显示下一个卡片。这个插件是 null safety 兼容的，因此可以在支持 null safety 的 Flutter 项目中使用。

安装

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

dependencies:
  flutter:
    sdk: flutter
  swipe_stack_null_safe: ^1.0.0

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

使用

以下是一个简单的示例，展示了如何使用 swipe_stack_null_safe 插件来创建一个可以滑动的卡片堆叠：

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

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

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

class SwipeStackExample extends StatefulWidget {
  @override
  _SwipeStackExampleState createState() => _SwipeStackExampleState();
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Swipe Stack Example'),
      ),
      body: SwipeStack(
        children: cards.map((card) {
          return SwiperItem(
            builder: (BuildContext context, int index) {
              return Card(
                child: Center(
                  child: Text(card),
                ),
              );
            },
          );
        }).toList(),
        onSwipe: (int index, SwiperPosition position) {
          print('Swiped card index: $index, position: $position');
        },
        onRewind: (int index, SwiperPosition position) {
          print('Rewinded card index: $index, position: $position');
        },
      ),
    );
  }
}

解释

1. SwipeStack: 这是一个包裹所有卡片的组件。它负责处理滑动手势并管理卡片堆叠。

2. SwiperItem: 每个卡片都是一个 SwiperItem。你可以在 builder 中定义每个卡片的内容。

3. onSwipe: 当用户滑动一个卡片时，这个回调会被触发。你可以在这个回调中处理卡片的移除逻辑。

4. onRewind: 当用户回退一个卡片时，这个回调会被触发。

自定义

你可以通过以下方式自定义 SwipeStack：

• swipeSensitivity: 控制滑动的灵敏度。
• swipeThreshold: 控制滑动的最小距离。
• maxAngle: 控制卡片旋转的最大角度。
• stackFrom: 控制卡片的堆叠方向（从上到下或从下到上）。

例如：

SwipeStack(
  swipeSensitivity: 0.6,
  swipeThreshold: 0.3,
  maxAngle: 30,
  stackFrom: StackFrom.bottom,
  children: cards.map((card) {
    return SwiperItem(
      builder: (BuildContext context, int index) {
        return Card(
          child: Center(
            child: Text(card),
          ),
        );
      },
    );
  }).toList(),
  onSwipe: (int index, SwiperPosition position) {
    print('Swiped card index: $index, position: $position');
  },
  onRewind: (int index, SwiperPosition position) {
    print('Rewinded card index: $index, position: $position');
  },
)