Flutter中实现多ListView间拖拽并自动滚动的方案咨询

针对你遇到的问题，直接给你可行的实现思路和代码示例：

核心问题分析 #

你用子ListView绑定Listener无效，本质是拖拽过程中指针事件被LongPressDraggable拦截，子组件拿不到指针移动事件，和TapDown触发无关——拖拽时指针本身处于down状态，只是事件被上层的Draggable接管了。

解决方案：顶层全局监听+独立ScrollController控制 #

放弃给每个ListView绑Listener，改为在顶层添加全局Listener捕获拖拽时的指针移动，再通过GlobalKey定位当前指针对应的ListView，触发对应滚动。完美适配多层嵌套场景，不用依赖第三方组件。

步骤1：封装带滚动控制的ListView组件 #

给每个ListView绑定独立的ScrollController，并暴露滚动方法和区域判断逻辑：

class ScrollableListView extends StatefulWidget {
  final List<Widget> children;
  final ScrollController? controller;

  const ScrollableListView({super.key, required this.children, this.controller});

  @override
  State<ScrollableListView> createState() => _ScrollableListViewState();
}

class _ScrollableListViewState extends State<ScrollableListView> {
  late ScrollController _controller;

  @override
  void initState() {
    super.initState();
    _controller = widget.controller ?? ScrollController();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      controller: _controller,
      children: widget.children,
    );
  }

  // 触发自动滚动
  void autoScroll(double delta) {
    if (_controller.hasClients) {
      _controller.animateTo(
        _controller.offset + delta,
        duration: const Duration(milliseconds: 16),
        curve: Curves.ease,
      );
    }
  }

  // 判断指针是否在当前ListView的滚动触发区（上下20px）
  bool isInScrollTriggerArea(Offset globalPosition) {
    final renderBox = context.findRenderObject() as RenderBox;
    final localPos = renderBox.globalToLocal(globalPosition);
    final size = renderBox.size;
    final isTopArea = localPos.dy <= 20;
    final isBottomArea = localPos.dy >= size.height - 20;
    return isTopArea || isBottomArea;
  }

  // 判断是否可向上/向下滚动
  bool canScrollUp() => _controller.offset > 0;
  bool canScrollDown() => _controller.offset < _controller.position.maxScrollExtent;
}

步骤2：顶层全局监听+拖拽组件整合 #

在页面顶层添加Listener（设置behavior: HitTestBehavior.translucent确保能捕获子组件上的指针事件），通过GlobalKey获取每个ListView的状态，实现精准滚动控制：

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

  @override
  State<MultiDragPage> createState() => _MultiDragPageState();
}

class _MultiDragPageState extends State<MultiDragPage> {
  // 给每个ListView分配GlobalKey，用于获取组件状态
  final _listKeys = [
    GlobalKey<ScrollableListViewState>(),
    GlobalKey<ScrollableListViewState>(),
    GlobalKey<ScrollableListViewState>(),
  ];
  final _scrollSpeed = 12.0; // 滚动速度，可自定义

  @override
  Widget build(BuildContext context) {
    return Listener(
      behavior: HitTestBehavior.translucent,
      onPointerMove: (event) {
        // 遍历所有ListView，找到指针所在的目标列表
        for (final key in _listKeys) {
          final state = key.currentState;
          if (state == null) continue;

          if (state.isInScrollTriggerArea(event.position)) {
            final localPos = (key.currentContext?.findRenderObject() as RenderBox)
                .globalToLocal(event.position);
            // 根据位置触发向上/向下滚动
            if (localPos.dy <= 20 && state.canScrollUp()) {
              state.autoScroll(-_scrollSpeed);
            } else if (localPos.dy >= (key.currentContext?.size?.height ?? 0) - 20 && state.canScrollDown()) {
              state.autoScroll(_scrollSpeed);
            }
          }
        }
      },
      // 嵌套ListView结构（这里示例横向包纵向，你可以根据需求改多层嵌套）
      child: Row(
        children: [
          Expanded(
            child: ScrollableListView(
              key: _listKeys[0],
              children: List.generate(20, (i) => DragDropItem(index: i)),
            ),
          ),
          Expanded(
            child: ScrollableListView(
              key: _listKeys[1],
              children: List.generate(20, (i) => DragDropItem(index: i + 20)),
            ),
          ),
          Expanded(
            child: ScrollableListView(
              key: _listKeys[2],
              children: List.generate(20, (i) => DragDropItem(index: i + 40)),
            ),
          ),
        ],
      ),
    );
  }
}

步骤3：你的拖拽Item保持原有封装 #

继续使用LongPressDraggable和DragTarget实现基础拖拽交换：

class DragDropItem extends StatefulWidget {
  final int index;

  const DragDropItem({super.key, required this.index});

  @override
  State<DragDropItem> createState() => _DragDropItemState();
}

class _DragDropItemState extends State<DragDropItem> {
  @override
  Widget build(BuildContext context) {
    return LongPressDraggable(
      data: widget.index,
      feedback: Material(
        child: Container(
          padding: const EdgeInsets.all(16),
          color: Colors.blueAccent,
          child: Text("Item ${widget.index}"),
        ),
      ),
      child: DragTarget<int>(
        onAccept: (data) {
          // 这里处理你的数据源交换逻辑，比如修改列表数组
          setState(() {
            // 示例：实际需要根据你的数据源结构调整
          });
        },
        builder: (ctx, candidateData, rejectedData) {
          return Container(
            padding: const EdgeInsets.all(16),
            margin: const EdgeInsets.symmetric(vertical: 4),
            color: candidateData.isNotEmpty ? Colors.grey[200] : Colors.white,
            child: Text("Item ${widget.index}"),
          );
        },
      ),
    );
  }
}

方案优势 #

1. 彻底解决子ListView无法响应指针事件的问题，全局监听直接捕获拖拽过程中的指针移动
2. 支持任意层级的ListView嵌套，只要给需要滚动的ListView绑定GlobalKey即可
3. 滚动触发区域、速度都可自定义，灵活性高

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