Flutter左右滑动按钮实现问题：拖动按钮增减计数器

如何拖动或滑动按钮以实现计数器的增减？

我使用了Container和Stack组件，拖动时会出现按钮的克隆副本，且按钮似乎没有Material效果。

我的代码如下：

class _DraggableButtonState extends State<DraggableButton> {
  Offset _position = Offset.zero; // Current position of the button

  @override
  void initState() {
    super.initState();
    _position = widget.initialPosition;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: _position.dx,
      child: Draggable(
        axis: Axis.horizontal,
        child: widget.child,
        feedback: Container(
          child: widget.child,
        ),
        onDragEnd: (details) {
          setState(() {
            _position = details.offset;
          });
        },
      ),
    );
  }
}

我不想使用任何第三方库。

1. 消除克隆副本问题 #

你看到的克隆是Draggable的feedback组件——拖动时会默认显示这个反馈层。解决方式有两种：

• 将feedback设为透明或空组件，彻底隐藏反馈层
• 改用GestureDetector直接监听拖动事件，直接控制按钮位置，避免生成额外的反馈副本

2. 恢复Material效果 #

按钮无Material效果，大概率是因为传入的widget.child未被Material组件包裹，或是Draggable的层级导致效果失效。可以将按钮放在Material组件内，或是直接使用ElevatedButton、TextButton这类自带Material交互效果的组件。

完整实现示例（无克隆+保留Material效果） #

下面是基于GestureDetector的横向拖动增减计数器实现，完全符合需求：

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

  @override
  State<DragCounter> createState() => _DragCounterState();
}

class _DragCounterState extends State<DragCounter> {
  int _count = 0;
  double _buttonX = 0;
  double _lastDragX = 0;
  // 拖动阈值：超过这个距离才触发计数变化
  final double _dragThreshold = 15;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Positioned(
            left: _buttonX,
            top: MediaQuery.of(context).size.height / 2,
            child: GestureDetector(
              onHorizontalDragStart: (details) {
                _lastDragX = details.globalPosition.dx;
              },
              onHorizontalDragUpdate: (details) {
                final deltaX = details.globalPosition.dx - _lastDragX;
                setState(() {
                  // 更新按钮位置
                  _buttonX += deltaX;
                  // 超过阈值时触发计数增减，并重置lastDragX避免连续触发
                  if (deltaX > _dragThreshold) {
                    _count++;
                    _lastDragX = details.globalPosition.dx;
                  } else if (deltaX < -_dragThreshold) {
                    _count--;
                    _lastDragX = details.globalPosition.dx;
                  }
                });
              },
              // 使用自带Material效果的ElevatedButton
              child: ElevatedButton(
                style: ElevatedButton.styleFrom(
                  padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
                ),
                onPressed: () {},
                child: Text('计数: $_count'),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

若坚持使用Draggable的改造方案 #

如果不想替换组件，也可以修改原代码解决问题：

class _DraggableButtonState extends State<DraggableButton> {
  Offset _position = Offset.zero;

  @override
  void initState() {
    super.initState();
    _position = widget.initialPosition;
  }

  @override
  Widget build(BuildContext context) {
    return Positioned(
      left: _position.dx,
      child: Draggable(
        axis: Axis.horizontal,
        // 用Material包裹child，恢复交互效果
        child: Material(
          child: widget.child, // 确保child是Material类按钮，如ElevatedButton
        ),
        // 隐藏反馈层，消除克隆副本
        feedback: const SizedBox.shrink(),
        onDragEnd: (details) {
          setState(() {
            _position = details.offset;
            // 根据拖动方向增减计数
            final dragDelta = details.offset.dx - _position.dx;
            if (dragDelta > 0) {
              _count++; // 需在State中定义_count变量
            } else if (dragDelta < 0) {
              _count--;
            }
          });
        },
      ),
    );
  }
}

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