Flutter工具箱拖拽功能实现求助：支持左侧到右侧拖拽及右侧面板内元素重定位

嘿，我来帮你搞定右侧面板里元素的二次拖拽问题！目前你的代码里，右侧的DragTarget只是在接收元素时临时返回一个Container，但既没有把这些元素保存下来，也没让它们具备可拖拽的能力。要实现右侧内部拖拽调整位置，我们需要做几个关键修改：

核心思路 #

• 把右侧面板改成StatefulWidget，用来维护已添加元素的列表和它们的位置
• 让右侧的每个元素本身成为Draggable，支持再次拖拽
• 右侧面板整体作为DragTarget，接收内部拖拽的元素，更新列表顺序来调整位置

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TableLayoutScreen(),
    );
  }
}

class TableLayoutScreen extends StatefulWidget {
  @override
  _TableLayoutScreenState createState() => _TableLayoutScreenState();
}

class _TableLayoutScreenState extends State<TableLayoutScreen> {
  // 模拟左侧面板的图片列表
  final List<String> images = [
    'assets/image1.png', // 替换成你的实际图片路径
    'assets/image2.png',
    'assets/image3.png',
  ];

  // 右侧面板已添加的元素列表，保存每个元素的图片路径和唯一标识
  final List<Map<String, dynamic>> rightPanelItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(), // 替换成你的DrawerWidget
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          'Table Layout',
          style: Theme.of(context).textTheme.titleLarge?.merge(
                TextStyle(letterSpacing: 1.3),
              ),
        ),
        centerTitle: true,
        elevation: 0,
      ),
      body: Container(
        child: Row(
          children: [
            // 左侧面板：可拖拽元素列表
            Container(
              color: Colors.blue[100],
              width: MediaQuery.of(context).size.width * 0.30,
              child: ListView.separated(
                padding: const EdgeInsets.all(16.0),
                itemCount: images.length,
                separatorBuilder: (context, index) => SizedBox(height: 12.0),
                itemBuilder: (context, index) {
                  return MenuListItem(
                    photoProvider: images[index],
                    itemData: {'id': 'left_$index', 'image': images[index]},
                  );
                },
              ),
            ),
            // 右侧面板：可拖拽调整的元素区域
            Expanded(
              child: Container(
                color: Colors.blue[200],
                alignment: Alignment.center,
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 6.0),
                  child: Container(
                    height: double.infinity,
                    width: double.infinity,
                    color: Colors.grey[200],
                    child: DragTarget<Map<String, dynamic>>(
                      builder: (context, candidateItems, rejectedItems) {
                        return Wrap(
                          spacing: 16.0,
                          runSpacing: 16.0,
                          padding: EdgeInsets.all(16.0),
                          children: rightPanelItems.map((item) {
                            return RightPanelDraggableItem(
                              itemData: item,
                              onDragCompleted: (draggedItem, targetIndex) {
                                // 调整元素位置
                                setState(() {
                                  final draggedIndex = rightPanelItems.indexOf(draggedItem);
                                  if (draggedIndex != -1 && targetIndex != -1) {
                                    final item = rightPanelItems.removeAt(draggedIndex);
                                    rightPanelItems.insert(targetIndex, item);
                                  }
                                });
                              },
                            );
                          }).toList(),
                        );
                      },
                      onAccept: (item) {
                        // 接收从左侧拖来的元素，添加到右侧列表
                        setState(() {
                          rightPanelItems.add({
                            'id': 'right_${DateTime.now().millisecondsSinceEpoch}',
                            'image': item['image'],
                          });
                        });
                      },
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 左侧面板的可拖拽元素
class MenuListItem extends StatelessWidget {
  final String photoProvider;
  final Map<String, dynamic> itemData;
  final bool isDepressed;
  final GlobalKey _draggableKey = GlobalKey();

  MenuListItem({
    Key? key,
    required this.photoProvider,
    required this.itemData,
    this.isDepressed = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Draggable<Map<String, dynamic>>(
      key: _draggableKey,
      dragAnchor: DragAnchor.pointer,
      data: itemData,
      feedback: DraggingListItem(
        dragKey: _draggableKey,
        photoProvider: photoProvider,
      ),
      child: Material(
        elevation: 12.0,
        borderRadius: BorderRadius.circular(20),
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(12.0),
            child: SizedBox(
              width: 120,
              height: 120,
              child: Center(
                child: AnimatedContainer(
                  duration: const Duration(milliseconds: 100),
                  curve: Curves.easeInOut,
                  height: isDepressed ? 115 : 120,
                  width: isDepressed ? 115 : 120,
                  child: Image.asset(
                    photoProvider,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

// 拖拽时的反馈组件
class DraggingListItem extends StatelessWidget {
  final GlobalKey dragKey;
  final String photoProvider;

  DraggingListItem({
    Key? key,
    required this.dragKey,
    required this.photoProvider,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Opacity(
      opacity: 0.8,
      child: SizedBox(
        width: 120,
        height: 120,
        child: Image.asset(
          photoProvider,
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

// 右侧面板的可拖拽元素，支持内部重排
class RightPanelDraggableItem extends StatefulWidget {
  final Map<String, dynamic> itemData;
  final Function(Map<String, dynamic>, int) onDragCompleted;

  RightPanelDraggableItem({
    Key? key,
    required this.itemData,
    required this.onDragCompleted,
  }) : super(key: key);

  @override
  _RightPanelDraggableItemState createState() => _RightPanelDraggableItemState();
}

class _RightPanelDraggableItemState extends State<RightPanelDraggableItem> {
  bool _isDragging = false;

  @override
  Widget build(BuildContext context) {
    return LongPressDraggable<Map<String, dynamic>>(
      data: widget.itemData,
      feedback: Opacity(
        opacity: 0.8,
        child: SizedBox(
          width: 100,
          height: 100,
          child: Image.asset(
            widget.itemData['image'],
            fit: BoxFit.cover,
          ),
        ),
      ),
      childWhenDragging: Opacity(
        opacity: 0.5,
        child: _buildItemContent(),
      ),
      onDragStarted: () {
        setState(() {
          _isDragging = true;
        });
      },
      onDragCompleted: () {
        setState(() {
          _isDragging = false;
        });
      },
      onDraggableCanceled: (_, __) {
        setState(() {
          _isDragging = false;
        });
      },
      child: DragTarget<Map<String, dynamic>>(
        builder: (context, candidateItems, rejectedItems) {
          return _buildItemContent();
        },
        onAccept: (draggedItem) {
          if (draggedItem != widget.itemData) {
            // 获取当前元素在列表中的索引，通知父组件调整位置
            final parentContext = context.findAncestorStateOfType<_TableLayoutScreenState>();
            if (parentContext != null) {
              final targetIndex = parentContext.rightPanelItems.indexOf(widget.itemData);
              widget.onDragCompleted(draggedItem, targetIndex);
            }
          }
        },
      ),
    );
  }

  Widget _buildItemContent() {
    return Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        color: Colors.pink,
        borderRadius: BorderRadius.circular(12),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(12),
        child: Image.asset(
          widget.itemData['image'],
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}

关键修改说明 #

1. 状态管理：把主页面改成StatefulWidget，用rightPanelItems列表维护右侧面板的元素，这样我们能跟踪每个元素的位置和数量。
2. 右侧元素可拖拽：创建RightPanelDraggableItem组件，每个右侧元素都是一个LongPressDraggable（也可以用普通Draggable，长按更适合内部重排场景），同时包裹一个DragTarget来接收其他拖拽过来的元素。
3. 位置调整逻辑：当拖拽元素到另一个元素的位置时，onAccept回调会触发，我们通过获取目标元素的索引，通知父组件调整列表中元素的顺序，从而实现位置交换。
4. 左侧到右侧的拖拽：保留原有的左侧Draggable，在右侧的DragTarget的onAccept里把元素添加到rightPanelItems列表，实现左到右的添加。

这样修改后，你不仅能从左侧拖拽元素到右侧，还能在右侧面板内长按任意元素拖拽到想要的位置，实现自由重排啦！

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