使用reorderables包时能否在不同ReorderableWrap之间移动tile组件？

现有包适配方案 #

你当前使用的reorderable_wrap包原生不支持跨两个组件实例拖拽tile，但可以通过自定义拖拽逻辑在不替换包的前提下实现需求，适配步骤如下：

• 关闭组件内置拖拽能力，将needsLongPressDraggable参数按需配置，自定义Draggable wrapper包裹每个tile，给拖拽数据添加来源列表标识、tile对应索引和数据属性
• 给两个ReorderableWrap外层分别嵌套DragTarget组件，配置接收规则匹配你自定义的拖拽数据类型
• 拖拽完成触发onAccept回调时，先从源列表（_tiles/_tiles2）中移除被拖拽的tile，再插入到目标列表的对应位置，调用setState刷新页面即可，该方案可以保留你已经适配完成的所有原有功能

你现有代码可参考如下结构调整：

Column(
  children: [
    // 给第一个Wrap套DragTarget
    DragTarget(
      builder: (context, candidateData, rejectedData) {
        return ReorderableWrap(
          needsLongPressDraggable: true,
          spacing: 8.0,
          runSpacing: 4.0,
          padding: const EdgeInsets.all(8),
          // 每个tile套Draggable
          children: _tiles.map((tile) => Draggable(
            data: {'list': 'tiles', 'index': _tiles.indexOf(tile), 'data': tile},
            child: tile,
            feedback: Material(child: tile),
          )).toList(),
          onReorder: _onReorder,
        );
      },
      onAccept: (data) {
        // 处理从_tiles2拖入的逻辑
      },
    ),
    // 第二个Wrap同理套DragTarget
    DragTarget(
      builder: (context, candidateData, rejectedData) {
        return ReorderableWrap(
          needsLongPressDraggable: true,
          spacing: 8.0,
          runSpacing: 4.0,
          padding: const EdgeInsets.all(8),
          children: _tiles2.map((tile) => Draggable(
            data: {'list': 'tiles2', 'index': _tiles2.indexOf(tile), 'data': tile},
            child: tile,
            feedback: Material(child: tile),
          )).toList(),
          onReorder: _onReorder,
        );
      },
      onAccept: (data) {
        // 处理从_tiles拖入的逻辑
      },
    )
])

替代第三方包推荐 #

如果不想自行改造原有包，可以选用原生支持跨列表拖拽的同类包：

• flutter_reorderable_grid_view：自带流式布局适配，支持同列表重排序、跨多列表拖拽，拖拽动画、间距配置等能力和reorderable_wrap接近，适配成本低
• reorderables：该包的ReorderableWrap组件原生支持多个实例之间的跨列表拖拽，只需配置统一的拖拽回调规则即可，不需要额外改造源码
• flutter_drag_and_drop_lists：支持多级、多区域拖拽，流式布局和列表布局都兼容，同时支持桌面端、移动端的拖拽交互

内容的提问来源于stack exchange，提问作者Georg K.