flutter如何实现卡片滑动效果

在Flutter中想实现类似Tinder的卡片滑动效果，应该用什么组件或方案最合适？目前尝试了PageView和Dismissible，但滑动体验不够流畅，且无法实现堆叠效果。请问有没有推荐的开源库或最佳实践？希望能支持左右滑动删除、回弹动画以及自定义滑动阈值等功能。

2 回复

Flutter中可使用PageView或Dismissible组件实现卡片滑动效果。PageView适合横向翻页，Dismissible支持滑动删除。也可通过GestureDetector自定义滑动逻辑，结合Transform实现动画效果。

更多关于flutter如何实现卡片滑动效果的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现卡片滑动效果，可以使用以下几种方式：

1. PageView（推荐）

适合实现卡片堆叠滑动效果：

PageView(
  controller: PageController(viewportFraction: 0.8),
  children: [
    _buildCard("卡片1", Colors.blue),
    _buildCard("卡片2", Colors.green),
    _buildCard("卡片3", Colors.orange),
  ],
)

Widget _buildCard(String title, Color color) {
  return Container(
    margin: EdgeInsets.all(10),
    decoration: BoxDecoration(
      color: color,
      borderRadius: BorderRadius.circular(15),
    ),
    child: Center(child: Text(title)),
  );
}

2. Dismissible

适合实现滑动删除效果：

Dismissible(
  key: Key(item.id),
  background: Container(color: Colors.red),
  direction: DismissDirection.horizontal,
  onDismissed: (direction) {
    // 删除项目
  },
  child: Card(
    child: ListTile(title: Text(item.title)),
  ),
)

3. 使用flutter_swipe_card包

安装：flutter pub add flutter_swipe_card

SwipeCard(
  swipeUp: true,
  swipeDown: true,
  onSwipe: (direction) {
    // 处理滑动方向
  },
  child: Card(
    child: Container(
      height: 200,
      child: Center(child: Text("滑动卡片")),
    ),
  ),
)

4. 自定义滑动动画

使用Transform和GestureDetector：

double _dragPosition = 0.0;

GestureDetector(
  onPanUpdate: (details) {
    setState(() {
      _dragPosition += details.delta.dx;
    });
  },
  onPanEnd: (_) {
    setState(() => _dragPosition = 0);
  },
  child: Transform.translate(
    offset: Offset(_dragPosition, 0),
    child: Card(child: /* 卡片内容 */),
  ),
)

推荐使用PageView，它内置了流畅的滑动动画和手势识别，适合大多数卡片滑动场景。

回到顶部