将 Draggable Container 拖动到 DragTarget 上时获取鼠标位置？

Question

我有一个带有 Draggable 小部件的容器。另一个 Container() 作为 DragTarget。

该区域的拖放效果非常好。

但是我把它放在哪里也很重要。如果我落在这个 DragTarget 的前半部分，我想做一些事情，如果落在另一半，我想做别的事情。

好吧，我可以使用两个dragArea，但现在不适用于我，因为我猜它可能会使系统超载，因为这只是一个例子。在最终的项目中，我们可能会将其乘以 40 或更多。

当鼠标悬停在这个 DragTarget 上时，我们如何知道鼠标的位置？ 好吧，使用 MouseRegion 不是一个选项，因为只有在未按下时才有效。 使用 Listener 解决这个问题，但请记住，点击将发生在另一个容器，即 Draggable Container() 上，因此在 DragTarget Container() 之外，其内部的 Listener 将不会被触发。

是否有另一个小部件可以帮助我解决此问题，或者是将这个放置区域划分为较小区域的唯一解决方案？

谢谢！

这里我有一个简单的设置。这个想法可以改变，例如，当拖动蓝色框的一半区域时，文本变为黄色。

import 'package:flutter/material.dart';

class dragDrop extends StatefulWidget {
  const dragDrop({super.key});

  @override
  State<dragDrop> createState() => _dragDropState();
}

class _dragDropState extends State<dragDrop> {
  Color dropColor = Colors.blue;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned(
          top: 0,
          left: 0,
          child: Draggable<int>(
            data: 0,
            feedback: panel(),
            child: panel(),
            onDragCompleted: () {
              print('completed');
            },
            onDragStarted: () {
              print('dragguing');
            },
          ),
        ),
        Positioned(
          top: 0,
          left: 500,
          child: DragTarget<int>( builder:
              (BuildContext context,  List<dynamic> accepted, List<dynamic> rejected,) {
            return Container(
              color: dropColor,
              width: 200,
              height: 200,
              child: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                    return Stack(
                      children: [
                        Positioned(
                          top: 0,
                          left: constraints.maxWidth / 2 - 40,
                          child: const Text(
                            'Upper side',
                            style: TextStyle(fontSize: 15),
                          ),
                        ),

                        Positioned(
                          top: constraints.maxHeight - 20,
                          left: constraints.maxWidth / 2 - 40,
                          child: const Text(
                            'Down side',
                            style: TextStyle(fontSize: 15),
                          ),
                        ),
                        //const Text('Down side'),
                      ],
                    );
                  }),
            );

          },

           onWillAcceptWithDetails: (DragTargetDetails<int> details) {
             print('onWillAcceptWithDetails');
             dropColor = Colors.blueAccent;
             return true;
           },
          onAcceptWithDetails: (DragTargetDetails<int> details) {
             print('dropped');
             setState(() {
               dropColor = Colors.blue;
             });
          },
            onLeave: (data) {
              print('onLeave');
              setState(() {
                dropColor = Colors.blue;
              });
            },
          ),
        ),
      ],
    );
  }

  Widget panel(){
    return Container(
      color: Colors.red,
      width: 200,
      height: 200,
    );
  }
}

Answer 1

那么，查看drag_taget.dart文件我们可以发现_lastOffset就是details.offset中的返回值。

_lastOffset = globalPosition - dragStartPoint;

问题就在这里。当我们将面板拖动到 DragTarget 上时，我们会看到

details.offset

中的

onMove: (details){

是我们收到的

_lastOffset

值。

想象一下，如果我们在屏幕左侧有一个可拖动对象，在右侧有一个拖动目标。当我们单击并按住并拖动此容器直到它悬停在 dreagTarget 上以触发 onMove 事件时，我们将接收到我们单击的位置与悬停目标之间的所有空间。 如果我们只是这样做：

_lastOffset = globalPosition;

一切正常，但更改原始代码并不是一个好主意。

在可拖动的数据中，我们可以在

details.data.startDragPoint

中设置dragStartPoint，然后从

details.offset

中减去它。-->Pskink，你是这里的高手，所以你的意见很重要，你怎么看？

谢谢！