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

时间:2019-11-20 07:52:54

标签: flutter dart stack draggable flutter-layout

我在Draggable上有一个DragTarget作为Stack的一部分。里面是另一个StackDraggables,同样在DragTargets上,依此类推...({{1}上方Stack上方Stack等)。 Stack是一个Draggable的{​​{1}},告诉您放置位置。 enter image description here homeView.dart

Positioned

draggableWidget.dart

Listener

itemStackBuilder.dart

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

当我想将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), ); }, ), ); } } 项移到顶部时,底层的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并用DraggableDraggables来做是更好的主意吗?

1 个答案:

答案 0 :(得分:0)

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

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

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