能否为appinio_swiper卡片添加双指示器？左滑显示‘dislike’文本

可以实现类似Tinder的滑动指示器效果，核心思路是利用组件的滑动回调获取偏移量，结合自定义卡片布局动态控制指示器的显示状态。

实现步骤与代码示例 #

1. 状态管理：保存滑动偏移量，用于控制指示器的透明度和位置
2. 自定义卡片布局：在卡片两侧叠加文本指示器，根据偏移量动态调整显示效果
3. 绑定滑动回调：通过onDragUpdate实时更新偏移量，onDragEnd重置状态

class SwiperWithIndicators extends StatefulWidget {
  const SwiperWithIndicators({super.key});

  @override
  State<SwiperWithIndicators> createState() => _SwiperWithIndicatorsState();
}

class _SwiperWithIndicatorsState extends State<SwiperWithIndicators> {
  final List<String> _cards = ['卡片1', '卡片2', '卡片3'];
  double _dragOffset = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: AppinioSwiper(
          cardsCount: _cards.length,
          onDragUpdate: (details) {
            setState(() {
              _dragOffset = details.offset.dx;
            });
          },
          onDragEnd: (direction) {
            setState(() {
              _dragOffset = 0.0;
            });
          },
          cardBuilder: (context, index) {
            return Stack(
              children: [
                // 基础卡片内容
                Container(
                  width: 300,
                  height: 400,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(16),
                    boxShadow: const [BoxShadow(blurRadius: 8, color: Colors.black12)],
                  ),
                  child: Center(child: Text(_cards[index], style: const TextStyle(fontSize: 20))),
                ),
                // 左滑Dislike指示器
                Positioned(
                  left: 20,
                  top: 0,
                  bottom: 0,
                  child: Opacity(
                    opacity: _dragOffset < 0 ? (-_dragOffset / 100).clamp(0, 1) : 0,
                    child: Transform.translate(
                      offset: Offset(_dragOffset * 0.2, 0),
                      child: const Text(
                        'DISLIKE',
                        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.red),
                      ),
                    ),
                  ),
                ),
                // 右滑Like指示器（可选）
                Positioned(
                  right: 20,
                  top: 0,
                  bottom: 0,
                  child: Opacity(
                    opacity: _dragOffset > 0 ? (_dragOffset / 100).clamp(0, 1) : 0,
                    child: Transform.translate(
                      offset: Offset(_dragOffset * 0.2, 0),
                      child: const Text(
                        'LIKE',
                        style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.green),
                      ),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

关键逻辑说明 #

• 滑动偏移量监听：onDragUpdate回调返回的details.offset.dx表示水平滑动距离，负值对应左滑，正值对应右滑
• 透明度控制：通过偏移量与阈值（示例中为100）的比例计算透明度，确保指示器随滑动程度逐步显现
• 位移增强交互：利用Transform.translate让指示器随滑动方向轻微偏移，模拟Tinder的动态效果
• 状态重置：滑动结束后通过onDragEnd重置偏移量，避免指示器残留显示

内容的提问来源于stack exchange，提问作者phishing_phil