Flutter拖拽功能动态增删问题：如何获取当前拖拽组件索引

针对动态增删可拖拽元素时无法获取当前拖拽组件索引的问题，可通过重构数据结构和组件生成逻辑解决，核心思路是让每个可拖拽组件绑定自身索引，拖拽结束时直接通过索引修改对应坐标。

关键修改点 #

1. 统一位置数据结构：用单个List<Offset>存储所有可拖拽元素的坐标，索引直接对应元素位置，替代原有的_x和_y两个独立列表。
2. 封装可拖拽组件生成方法：通过闭包将索引传递到onDragEnd回调中，无需依赖Draggable的data字段（该字段主要用于拖拽目标接收数据）。
3. 动态生成组件：在build方法中遍历位置列表生成所有可拖拽元素，避免原代码中重复累加组件的问题。
4. 添加动态增删逻辑：通过按钮触发增删操作，同步更新位置列表并刷新界面。

修改后的完整代码 #

import 'dart:math';
import 'package:flutter/material.dart';

class DragAndDrop extends StatefulWidget {
  const DragAndDrop({
    Key? key,
    this.width,
    this.height,
  }) : super(key: key);

  final double? width;
  final double? height;

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

class _DragAndDropState extends State<DragAndDrop> {
  // 用单个列表存储所有元素的位置，索引对应元素的序号
  List<Offset> _positions = [const Offset(0.0, 0.0), const Offset(20.0, 20.0)];
  final GlobalKey stackKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    final parentWidth = widget.width ?? MediaQuery.of(context).size.width;
    final parentHeight = widget.height ?? MediaQuery.of(context).size.height;

    return Stack(
      key: stackKey,
      fit: StackFit.expand,
      children: [
        // 背景容器
        Container(color: Colors.blue),
        // 动态生成所有可拖拽元素
        ..._positions.asMap().entries.map((entry) {
          final index = entry.key;
          final position = entry.value;
          return Positioned(
            left: position.dx,
            top: position.dy,
            child: _buildDraggableItem(index),
          );
        }).toList(),
        // 添加新元素的按钮
        Positioned(
          bottom: 20,
          right: 20,
          child: ElevatedButton(
            onPressed: () {
              setState(() {
                // 默认在(50,50)位置添加新元素
                _positions.add(const Offset(50.0, 50.0));
              });
            },
            child: const Icon(Icons.add),
          ),
        ),
      ],
    );
  }

  // 生成带索引绑定的可拖拽组件
  Widget _buildDraggableItem(int index) {
    return Draggable(
      feedback: const Icon(
        Icons.keyboard_arrow_down,
        color: Color.fromRGBO(212, 14, 14, 0.584),
        size: 40,
      ),
      childWhenDragging: Container(),
      child: Stack(
        children: [
          const Icon(
            Icons.keyboard_arrow_down,
            color: Color(0x95000000),
            size: 40,
          ),
          // 右上角添加删除按钮
          Positioned(
            top: 0,
            right: 0,
            child: GestureDetector(
              onTap: () {
                setState(() {
                  _positions.removeAt(index);
                });
              },
              child: const Icon(Icons.close, size: 16, color: Colors.red),
            ),
          ),
        ],
      ),
      onDragEnd: (dragDetails) {
        setState(() {
          final parentPos = stackKey.globalPaintBounds;
          if (parentPos == null) return;

          final parentWidth = widget.width ?? MediaQuery.of(context).size.width;
          final parentHeight = widget.height ?? MediaQuery.of(context).size.height;

          // 计算新坐标并做边界限制
          double newX = dragDetails.offset.dx - parentPos.left;
          double newY = dragDetails.offset.dy - parentPos.top;
          newX = max(0.0, min(newX, parentWidth - 40));
          newY = max(0.0, min(newY, parentHeight - 40));

          // 通过索引直接修改对应位置的坐标
          _positions[index] = Offset(newX, newY);
        });
      },
    );
  }
}

extension GlobalKeyExtension on GlobalKey {
  Rect? get globalPaintBounds {
    final renderObject = currentContext?.findRenderObject();
    var translation = renderObject?.getTransformTo(null).getTranslation();
    if (translation != null && renderObject?.paintBounds != null) {
      return renderObject!.paintBounds
          .shift(Offset(translation.x, translation.y));
    } else {
      return null;
    }
  }
}

代码说明 #

• 位置管理：_positions列表中的每个Offset对应一个可拖拽元素的坐标，索引与元素一一绑定，拖拽结束时直接通过索引修改对应坐标。
• 组件生成：通过_buildDraggableItem方法生成每个可拖拽组件，该方法接收索引参数，在onDragEnd中直接使用索引更新位置，避免了无法获取当前组件引用的问题。
• 动态增删：点击右下角的添加按钮可新增元素；每个元素右上角的关闭按钮可删除对应元素，操作后通过setState刷新界面。
• 边界处理：拖拽时自动限制元素在父容器范围内，避免超出边界。

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