Flutter中如何将CustomScrollView内的SliverList设为DragTarget？

问题根源 #

直接用DragTarget包裹SliverList无法生效，因为DragTarget属于RenderBox类型组件，而CustomScrollView的slivers参数要求必须是RenderSliver类型组件，两者不属于同一渲染层级，无法兼容。

1. 实现每个SliverList作为DragTarget的方案 #

需要自定义一个兼容Sliver体系的SliverDragTarget组件，将DragTarget的拖拽接收逻辑与Sliver的滚动布局逻辑结合，以下是完整实现：

步骤1：自定义SliverDragTarget组件 #

import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';

class SliverDragTarget<T> extends SingleChildRenderObjectWidget {
  final DragTargetAccept<T> onAccept;
  final DragTargetBuilder builder;
  final DragTargetWillAccept<T>? onWillAccept;
  final DragTargetLeave<T>? onLeave;

  const SliverDragTarget({
    super.key,
    required this.onAccept,
    required this.builder,
    this.onWillAccept,
    this.onLeave,
    super.child,
  });

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderSliverDragTarget<T>(
      onAccept: onAccept,
      onWillAccept: onWillAccept,
      onLeave: onLeave,
      builder: builder,
      context: context,
    );
  }

  @override
  void updateRenderObject(BuildContext context, RenderSliverDragTarget<T> renderObject) {
    renderObject
      ..onAccept = onAccept
      ..onWillAccept = onWillAccept
      ..onLeave = onLeave
      ..builder = builder
      ..context = context;
  }
}

class RenderSliverDragTarget<T> extends RenderProxySliver with DragTargetMixin<T> {
  DragTargetAccept<T> onAccept;
  DragTargetBuilder builder;
  DragTargetWillAccept<T>? onWillAccept;
  DragTargetLeave<T>? onLeave;
  BuildContext context;

  RenderSliverDragTarget({
    required this.onAccept,
    required this.builder,
    this.onWillAccept,
    this.onLeave,
    required this.context,
    RenderSliver? child,
  }) : super(child);

  @override
  bool hitTestSelf(Offset position) => true;

  @override
  void handleDragEnter(DragTargetDetails<T> details) {
    onWillAccept?.call(details.data);
    markNeedsLayout();
  }

  @override
  void handleDragLeave(DragTargetDetails<T>? details) {
    onLeave?.call(details?.data);
    markNeedsLayout();
  }

  @override
  void handleDragUpdated(DragTargetDetails<T> details) {
    markNeedsLayout();
  }

  @override
  void handleDragAccepted(DragTargetDetails<T> details) {
    onAccept(details.data);
    markNeedsLayout();
  }

  @override
  Widget build(BuildContext context) {
    return builder(
      this.context,
      const [],
      const [],
    );
  }
}

步骤2：在CustomScrollView中使用 #

将需要作为DragTarget的SliverList用SliverDragTarget包裹，即可实现整个列表区域接收拖拽：

CustomScrollView(
  slivers: [
    SliverList.builder(
      itemCount: 10,
      itemBuilder: (context, index) => ListTile(title: Text("普通列表项 $index")),
    ),

    // 包裹成可接收拖拽的SliverList
    SliverDragTarget<String>(
      onAccept: (data) {
        print("接收拖拽数据：$data");
        // 这里处理接收后的逻辑，比如添加数据到当前列表
      },
      builder: (context, candidateData, rejectedData) {
        // 根据拖拽状态调整列表的视觉反馈
        final isDraggingOver = candidateData.isNotEmpty;
        return SliverList.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Container(
              color: isDraggingOver ? Colors.blue.withOpacity(0.1) : null,
              child: Text(items[index].name),
            );
          },
        );
      },
    ),

    SliverList.builder(
      itemCount: 10,
      itemBuilder: (context, index) => ListTile(title: Text("普通列表项 $index")),
    ),
  ],
)

2. CustomScrollView中实现该功能的核心要点 #

• Sliver与Box组件层级差异：必须确保拖拽目标是RenderSliver类型，不能直接使用RenderBox类型的DragTarget，否则会破坏CustomScrollView的滚动布局。
• 拖拽状态视觉反馈：通过builder参数根据candidateData判断是否有拖拽项悬停，动态调整列表样式（比如背景色），提升用户体验。
• 边缘滚动触发：如果需要拖拽到列表边缘时自动滚动，可在handleDragUpdated中检测拖拽位置，调用ScrollController触发滚动。
• 数据状态同步：拖拽接收后，需同步更新列表数据源（比如items），并调用setState触发UI刷新。

内容的提问来源于stack exchange，提问作者Albin P K