Flutter中带重排功能的列表能否将外层列表项移入内层列表？

你需要的是支持两类操作的列表：一是所有同级文件、文件夹条目支持上下拖拽调整排序，二是文件类条目可以拖拽移入文件夹类条目内，功能效果如下：

核心实现逻辑 #

• 先给所有列表条目增加type字段标记类型，取值为file（文件）或folder（文件夹），同时给嵌套层级的条目增加parentId标记所属父文件夹ID，方便后续拖拽逻辑判断
• 拖拽过程中实时识别两个节点：当前拖拽的条目（active）、拖拽悬停的目标条目（over），根据两个条目的类型、悬停位置做分支处理
  1. 当拖拽条目是文件、目标条目是文件夹，且悬停位置在文件夹条目主体区域时，触发文件移入文件夹逻辑：将文件从原父级列表中移除，插入到目标文件夹的子列表末尾
  2. 当拖拽条目和目标条目属于同一个父级（同级），且悬停位置在目标条目的上/下边缘间隙时，触发同级重排逻辑：调整两个条目在当前列表中的顺序
  3. 其他情况（比如文件夹拖入文件、跨层级拖到非文件夹区域）判定为无效操作，放置后不做任何修改
• 拖拽过程中要同步给用户UI反馈：比如文件悬停到文件夹上时给文件夹加高亮边框，重排时显示占位条提示放置位置，无效操作时显示禁用态提示

核心代码示例（React + @dnd-kit 技术栈） #

// 列表条目基础数据结构
interface ListItem {
  id: string;
  type: 'file' | 'folder';
  name: string;
  parentId: string; // 根级条目parentId为'root'
  children?: ListItem[]; // 仅文件夹类型有该字段
}

// 拖拽结束事件处理
const handleDragEnd = (event: DragEndEvent) => {
  const { active, over } = event;
  if (!over) return;

  const activeItem = allItems.find(item => item.id === active.id);
  const overItem = allItems.find(item => item.id === over.id);
  const isDropOnFolderBody = over.data.current?.dropPosition === 'center';
  const isSameParent = activeItem.parentId === overItem.parentId;

  // 分支1：文件移入文件夹
  if (activeItem.type === 'file' && overItem.type === 'folder' && isDropOnFolderBody) {
    const updatedItems = allItems.filter(item => item.id !== active.id);
    const targetFolder = updatedItems.find(item => item.id === over.id);
    targetFolder.children.push(activeItem);
    setAllItems(updatedItems);
    return;
  }

  // 分支2：同级条目重排
  if (isSameParent) {
    const oldIndex = allItems.findIndex(item => item.id === active.id);
    const newIndex = allItems.findIndex(item => item.id === over.id);
    // 重排数组的工具方法，可自己实现或用开源工具函数
    const reorderedItems = arrayMove(allItems, oldIndex, newIndex);
    setAllItems(reorderedItems);
  }
}

其他技术栈可以参考上面的逻辑替换对应拖拽能力即可：移动端原生开发可以用系统自带的拖拽API，Flutter可以组合ReorderableListView和DragTarget实现，逻辑规则完全通用。

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