Flutter：将 Draggable Stack 项拖动到 Draggable Stack 项中

Question

我在DragTarget 上有一个Draggable，作为Stack 的一部分。里面是另一个Stack 和Draggables，又是DragTargets 等等......（Stack 超过Stack 超过Stack 等）。 Draggable 是 Positioned 和 Listener 告诉放置位置。 homeView.dart

body: Stack(children: [
   DraggableWidget(parentKey, Offset(0, 0)),
]),

draggableWidget.dart

class DraggableWidget extends StatefulWidget {
  final Key itemKey;
  final Offset itemPosition;
  DraggableWidget(this.itemKey, this.itemPosition);

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

class _DraggableWidgetState extends State<DraggableWidget> {
  Offset tempDelta = Offset(0, 0);
  Window<List<Key>> item;
  List<DraggableWidget> childList = [];
  Map<Key, Window<List>> structureMap;

  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    structureMap = Provider.of<Data>(context).structureMap;

    if (structureMap[widget.itemKey] != null) {
      structureMap[widget.itemKey].childKeys.forEach(
            (k) => childList.add(
              DraggableWidget(k, item.position),
            ),
          );
    } else {
      structureMap[widget.itemKey] = Window<List<Key>>(
          title: 'App',
          key: widget.itemKey,
          size: Size(MediaQuery.of(context).size.width,
              MediaQuery.of(context).size.height),
          position: Offset(0, 0),
          color: Colors.blue,
          childKeys: []);
    }
    item = Provider.of<Data>(context).structureMap[widget.itemKey];

    return Positioned(
      top: item.position.dx,
      left: item.position.dy,
      child: DragTarget(
        builder:
            (buildContext, List<Window<List<Key>>> candidateData, rejectData) {
          return Listener(
            onPointerDown: (PointerDownEvent event) {},
            onPointerUp: (PointerUpEvent event) {
              setState(() {
                item.position = Offset(item.position.dx + tempDelta.dx,
                    item.position.dy + tempDelta.dy);
                tempDelta = Offset(0, 0);
              });
            },
            onPointerMove: (PointerMoveEvent event) {
              tempDelta = Offset((event.delta.dy + tempDelta.dx),
                  (event.delta.dx + tempDelta.dy));
            },
            child: Draggable(
                childWhenDragging: Container(),
                feedback: Container(
                  color: item.color,
                  height: item.size.height,
                  width: item.size.width,
                ),
                child: Column(children: [
                  Text(item.title),
                  Container(
                    color: item.color,
                    height: item.size.height,
                    width: item.size.width,
                    child: ItemStackBuilder(widget.itemKey, item.position),
                  ),
                ]),
                data: item),
          );
        },
      ),
    );
  }
}

itemStackBuilder.dart

class ItemStackBuilder extends StatelessWidget {
  final Key itemKey;
  final Offset itemPosition;

  ItemStackBuilder(this.itemKey, this.itemPosition);
  @override
  Widget build(BuildContext context) {
    Map<Key, Window<List<Key>>> structureMap =
        Provider.of<Data>(context).structureMap;
    if (structureMap[itemKey] == null) {
      structureMap[itemKey] = Window(size: Size(20, 20), childKeys: []);
    }

    return Stack(overflow: Overflow.visible, children: [
      ...stackItems(context),
      Container(
          height: structureMap[itemKey].size.height,
          width: structureMap[itemKey].size.width,
          color: Colors.transparent),
    ]);
  }

  List<Widget> stackItems(BuildContext context) {
    List<Key> childKeyList =
        Provider.of<Data>(context).structureMap[itemKey].childKeys;
    var stackItemDraggable;
    List<Widget> stackItemsList = [];
    if (childKeyList == null || childKeyList.length < 1) {
      stackItemsList = [Container()];
    } else {
      for (int i = 0; i < childKeyList.length; i++) {
        stackItemDraggable = DraggableWidget(childKeyList[i], itemPosition);
        stackItemsList.add(stackItemDraggable);
      }
    }
    return stackItemsList;
  }
}

当我想将Draggable 项目移到顶部时，底层Stack 会移动。

我尝试使用Listener 小部件并能够检测到Stack 内的所有RenderBoxes。

但是如何选择特定的Draggable 和/或禁用所有其他层？忘记Draggables 并使用Positioned 和GestureDetector 来完成这一切是不是更好？

Answer 1

好吧，我的错误不是框架： 在 itemStackBuilder.dart 上，我使用了一个额外的 Container 来调整 Stack 的大小。我无法识别，因为颜色是透明的：

      Container(
          height: structureMap[itemKey].size.height,
          width: structureMap[itemKey].size.width,
          color: Colors.transparent),
    ]);
  }

删除这部分后，现在一切正常。