Flutter:将可拖动堆栈项目拖动到可拖动堆栈项目中

问题描述 投票:0回答:1

我在Draggable上有一个DragTarget作为Stack的一部分。里面是另一个带有StackDraggables,再次位于DragTargets上,依​​此类推...(Stack相对于Stack高于Stack等)。Draggable是带有PositionedListener,告诉您放置位置。enter image description herehomeView.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小部件进行了尝试,并且能够检测到RenderBoxes内部的所有Stack

但是如何选择特定的Draggable和/或禁用所有其他层?忘记Draggables并用PositionedGestureDetector完成所有操作,是个更好的主意吗?

flutter dart stack draggable flutter-layout
1个回答
0
投票

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

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

删除此部分后,目前一切正常。

© www.soinside.com 2019 - 2024. All rights reserved.