flutter_card_swiper如何设置上方卡片效果

我在使用flutter_card_swiper插件时遇到一个问题：如何设置上方卡片的效果？比如我想调整卡片的旋转角度、阴影或缩放比例，但不知道具体该修改哪些参数。文档里没有找到明确的说明，有没有熟悉这个插件的大佬能指点一下？最好能提供具体的代码示例。

2 回复

使用CardSwiper的allowedSwipeDirection属性限制滑动方向，并配合isLoop: false禁用循环。通过自定义cardBuilder设置上方卡片样式，如透明度、缩放等效果。

更多关于flutter_card_swiper如何设置上方卡片效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 card_swiper 包设置上方卡片效果，可以通过以下配置实现：

主要参数配置：

CardSwiper(
  cardsCount: cards.length,
  cardBuilder: (context, index, percentThresholdX, percentThresholdY) {
    return YourCardWidget(card: cards[index]);
  },
  // 设置上方卡片堆叠效果
  stackFrom: StackFrom.top,  // 关键参数：卡片从顶部开始堆叠
  numberOfCardsDisplayed: 3,  // 同时显示的卡片数量
  backCardOffset: Offset(0, 40), // 后方卡片的偏移量
  scale: 0.9,                // 后方卡片的缩放比例
  padding: EdgeInsets.all(24),// 容器内边距
)

关键参数说明：

  • stackFrom: StackFrom.top - 让卡片从顶部开始堆叠
  • numberOfCardsDisplayed - 控制可见的卡片层数（建议3-5张）
  • backCardOffset - 调整后方卡片的垂直偏移
  • scale - 设置后方卡片的缩放大小（0.9表示90%大小）
  • padding - 控制整个swiper的边距

完整示例：

import 'package:card_swiper/card_swiper.dart';

class CardSwiperExample extends StatelessWidget {
  final List<CardModel> cards = [...]; // 你的卡片数据
  
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 400,
      child: CardSwiper(
        cardsCount: cards.length,
        cardBuilder: (context, index, percentThresholdX, percentThresholdY) {
          return Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(16),
              color: Colors.blue,
              boxShadow: [
                BoxShadow(
                  blurRadius: 8,
                  color: Colors.black26,
                )
              ],
            ),
            child: Center(child: Text('Card $index')),
          );
        },
        stackFrom: StackFrom.top,
        numberOfCardsDisplayed: 3,
        backCardOffset: Offset(0, 40),
        scale: 0.9,
        padding: EdgeInsets.all(24),
      ),
    );
  }
}

通过调整这些参数，你可以获得理想的顶部堆叠卡片效果。

回到顶部