Flutter卡片堆叠展示插件card_stack_widget的使用

📦 card_stack_widget

card_stack_widget是一个为Flutter应用提供垂直可滑动且高度可定制的卡片堆栈组件。通过这个插件，你可以创建一个具有交互性的卡片堆栈效果，使你的应用界面更加生动。

Usage 使用方法

CardStackWidget需要一个CardModel列表来创建卡片堆栈。你可以自定义卡片的滑动或移除方向，调整缩放比例或位置系数。此外，还可以设置拖动时改变透明度的效果。

以下是一个简单的例子，展示了如何使用CardStackWidget和CardModel：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Stack Widget Example'),
        ),
        body: CardStackExample(),
      ),
    );
  }
}

class CardStackExample extends StatelessWidget {
  List<CardModel> _buildMockList(BuildContext context, {int size = 4}) {
    final double containerWidth = MediaQuery.of(context).size.width - 16;

    var list = <CardModel>[];
    for (int i = 0; i < size; i++) {
      var color = Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0);

      list.add(
        CardModel(
          backgroundColor: color,
          radius: BorderRadius.circular(8),
          shadowColor: Colors.black.withOpacity(0.2),
          child: SizedBox(
            height: 310,
            width: containerWidth,
            child: Container(
              decoration: BoxDecoration(
                color: color,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Center(
                child: Text(
                  'Card $i',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              ),
            ),
          ),
        ),
      );
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    final mockList = _buildMockList(context);

    return CardStackWidget(
      opacityChangeOnDrag: true,
      swipeOrientation: CardOrientation.both,
      cardDismissOrientation: CardOrientation.both,
      positionFactor: 3,
      scaleFactor: 1.5,
      alignment: Alignment.center,
      reverseOrder: true,
      animateCardScale: true,
      dismissedCardDuration: Duration(milliseconds: 150),
      cardList: mockList,
      onCardTap: (CardModel card) {
        // Handle tap event
        print('Card tapped');
      },
    );
  }
}

参数说明

CardStackWidget 支持的属性

• cardList: 卡片模型列表。
• scaleFactor: 缩放比例。
• positionFactor: 位置系数。
• alignment: 对齐方式（默认居中）。
• reverseOrder: 是否反转顺序。
• cardDismissOrientation: 卡片移除的方向。
• swipeOrientation: 滑动方向。
• onCardTap: 卡片点击事件回调。
• animateCardScale: 动画缩放持续时间。
• dismissedCardDuration: 卡片被移除后的动画持续时间。
• opacityChangeOnDrag: 拖动时是否改变透明度。

CardModel 支持的属性

• key: 唯一标识符。
• shadowColor: 阴影颜色。
• backgroundColor: 背景颜色。
• radius: 圆角半径。
• border: 边框样式。
• child: 子组件。
• padding: 内边距。
• margin: 外边距。
• gradient: 渐变色。
• imageDecoration: 图像装饰。

通过这些参数，你可以根据自己的需求定制出独特的卡片堆栈效果。希望这个示例对你有所帮助！

Preview 效果预览

以上是关于card_stack_widget的基本介绍和使用示例，如果有任何问题或者需要更深入的帮助，请随时提问！