Flutter实现拖拽元素触达屏幕边缘时GridView自动滚动方案咨询

flutter_staggered_grid_view包并没有内置拖拽元素触达屏幕边缘时自动滚动GridView的功能，需要通过自定义逻辑实现，核心思路是利用ScrollController监听拖拽位置，在元素接近屏幕顶部/底部时触发滚动操作。

实现步骤 #

• 为GridView.custom绑定一个ScrollController，用来控制滚动行为
• 在LongPressDraggable的onDragUpdate回调中获取拖拽的全局坐标，判断是否触发滚动阈值
• 根据拖拽位置与屏幕边缘的距离，调用ScrollController的滚动方法实现自动滚动
• 拖拽结束时停止滚动监听，避免不必要的资源消耗

修改后的完整代码示例 #

class StaggeredDraggableGrid extends StatefulWidget {
  final List<Widget> children;
  final List<QuiltedGridTile> pattern;
  final Function(int, int) onReorder;

  const StaggeredDraggableGrid({
    super.key,
    required this.children,
    required this.pattern,
    required this.onReorder,
  });

  @override
  State<StaggeredDraggableGrid> createState() => _StaggeredDraggableGridState();
}

class _StaggeredDraggableGridState extends State<StaggeredDraggableGrid> {
  final ScrollController _scrollController = ScrollController();
  Timer? _scrollTimer;
  final double _edgeThreshold = 50.0; // 触发自动滚动的边缘距离
  final double _scrollSpeed = 10.0; // 自动滚动速度

  void _onDragStarted() {
    // 拖拽开始时初始化状态
  }

  void _onDragUpdate(DragUpdateDetails details) {
    final viewportHeight = MediaQuery.of(context).size.height;
    final localY = details.localPosition.dy;

    // 计算当前拖拽位置与屏幕边缘的距离
    final distanceToTop = localY;
    final distanceToBottom = viewportHeight - localY;

    // 停止之前的滚动定时器
    _scrollTimer?.cancel();

    // 接近顶部，向上滚动
    if (distanceToTop < _edgeThreshold) {
      _scrollTimer = Timer.periodic(const Duration(milliseconds: 16), (timer) {
        if (_scrollController.hasClients && _scrollController.offset > 0) {
          _scrollController.jumpTo(_scrollController.offset - _scrollSpeed);
        } else {
          timer.cancel();
        }
      });
    }
    // 接近底部，向下滚动
    else if (distanceToBottom < _edgeThreshold) {
      _scrollTimer = Timer.periodic(const Duration(milliseconds: 16), (timer) {
        if (_scrollController.hasClients && 
            _scrollController.offset < _scrollController.position.maxScrollExtent) {
          _scrollController.jumpTo(_scrollController.offset + _scrollSpeed);
        } else {
          timer.cancel();
        }
      });
    }
    // 不在边缘区域，停止滚动
    else {
      _scrollTimer?.cancel();
    }
  }

  void _onDragEnd(DraggableDetails details) {
    // 拖拽结束时清理定时器
    _scrollTimer?.cancel();
    _scrollTimer = null;
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _scrollTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GridView.custom(
      shrinkWrap: true,
      primary: false,
      scrollDirection: Axis.vertical,
      controller: _scrollController, // 绑定ScrollController
      gridDelegate: SliverQuiltedGridDelegate(
        crossAxisCount: 4,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        repeatPattern: QuiltedGridRepeatPattern.inverted,
        pattern: widget.pattern,
      ),
      childrenDelegate: SliverChildBuilderDelegate(
        childCount: widget.children.length,
        (context, index) {
          var selectedWidget = widget.children[index];
          return LongPressDraggable<GlobalKey>(
            data: selectedWidget.key as GlobalKey,
            onDragStarted: _onDragStarted,
            onDragUpdate: _onDragUpdate, // 添加拖拽更新回调
            onDragEnd: _onDragEnd,
            feedback: SizedBox(width: 100, height: 100, child: selectedWidget),
            childWhenDragging: Container(),
            child: DragTarget<GlobalKey>(
              builder: (context, accepted, rejected) => selectedWidget,
              onWillAccept: (GlobalKey? accept) {
                return true;
              },
              onAccept: (GlobalKey item) {
                int startIndex =
                    widget.children.indexWhere((x) => x.key == item);
                int endIndex = widget.children
                    .indexWhere((x) => x.key == selectedWidget.key);
                widget.onReorder(startIndex, endIndex);
              },
            ),
          );
        },
      ),
    );
  }
}

关键细节说明 #

• _edgeThreshold：可根据需求调整触发自动滚动的边缘距离，数值越小需要拖拽越靠近边缘才会触发
• _scrollSpeed：控制自动滚动的快慢，数值越大滚动速度越快
• 使用Timer.periodic模拟流畅的滚动动画，每16ms触发一次（接近屏幕刷新率）
• 在dispose方法中清理ScrollController和定时器，避免内存泄漏

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