flutter - 在 Flutter 中悬停在 Dragtarget 上时可拖动触发错误信息

Question

我正在使用 Flutter 中的可拖动对象和拖动目标。我目前在我的项目中有两个拖动目标，一旦我将一个可拖动对象放在它们上面，它们都会正确响应。但是，一旦从 draggable1 到 dragtarget1 的第一次拖动完成，第二次拖动就会出现一个问题：当使用 draggable2 将鼠标悬停（未放置）在 dragtarget2 上时，会触发 onaccept 属性并使用 dragtarget1 的内容构建 dragtarget2。我不明白为什么。我将不胜感激任何帮助/提示！

我制作了一个简短的视频，直观地展示了这个问题：https ://youtu.be/IJa3oZ_7fw0

这是我的拖动目标代码：

 Widget build(BuildContext context) {
bool isSuccessful = false;
int caughtData;
return SafeArea(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Container(
              height: 70,
              width: 200,
              color: Colors.grey.shade600,
              child: DragTarget<int>(
                builder: (context, List<int> candidateData, rejectedData) {
                  return isSuccessful
                      ? FlatButton(
                          color:
                              chordBrain.chordBank[caughtData].buttoncolor,
                          child:
                              Text(chordBrain.chordBank[caughtData].chord),
                          onPressed: () {
                            playSound(noteBrain.noteBank[caughtData].note1);
                            playSound(noteBrain.noteBank[caughtData].note2);
                            playSound(noteBrain.noteBank[caughtData].note3);
                            playSound(noteBrain.noteBank[caughtData].note4);
                          },
                        )
                      : Container();
                },
                onWillAccept: (int data) {
                  print('$data');
                  return true;
                },
                onAccept: (int data) {
                  print('$data');
                  isSuccessful = true;
                  caughtData = data;
                },
              ),
            ),
          ),
          SizedBox(
            width: 8,
          ),
          Expanded(
            child: Container(
              height: 70,
              width: 200,
              color: Colors.grey.shade600,
              child: DragTarget<int>(
                builder: (context, List<int> candidateData, rejectedData) {
                  return isSuccessful
                      ? FlatButton(
                          color:
                              chordBrain.chordBank[caughtData].buttoncolor,
                          child:
                              Text(chordBrain.chordBank[caughtData].chord),
                          onPressed: () {
                            playSound(noteBrain.noteBank[caughtData].note1);
                            playSound(noteBrain.noteBank[caughtData].note2);
                            playSound(noteBrain.noteBank[caughtData].note3);
                            playSound(noteBrain.noteBank[caughtData].note4);
                          },
                        )
                      : Container();
                },
                onWillAccept: (int data) {
                  print('$data');
                  return true;
                },
                onAccept: (int data) {
                  print('$data');
                  isSuccessful = true;
                  caughtData = data;
                },
              ),
            ),
          ),
        ],
      ),

标签： flutterdraggabledragtarget

Answer 1

看来我找到了一个解决方案，它不是很优雅，但它有效。虽然我仍然不明白为什么我的可拖动对象在悬停（而不是放下）拖动目标时触发构建，但通过使拖动目标彼此更加不同，问题得到了解决。我没有为我的拖动目标分配相同的 bool 和 int 变量来触发构建小部件，而是给了它们唯一的变量：

Widget build(BuildContext context) {
bool isSuccessful = false;
bool isWorking = false;
int caughtData1;
int caughtData2;

布尔值 isSuccessful 和整数 catchData1 分配给第一个拖动目标，isWorking 和 catchData2 分配给第二个拖动目标。我还删除了 onWillAccept 代码 - 但不确定这是否有必要。完整代码如下：

Widget build(BuildContext context) {
bool isSuccessful = false;
bool isWorking = false;
int caughtData1;
int caughtData2;

return SafeArea(
  child: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          Expanded(
            child: Container(
              height: 70,
              color: Colors.grey.shade600,
              child: DragTarget<int>(
                builder: (context, List<int> candidateData, rejectedData) {
                  return isWorking
                      ? FlatButton(
                          color:
                              chordBrain.chordBank[caughtData1].buttoncolor,
                          child:
                              Text(chordBrain.chordBank[caughtData1].chord),
                          onPressed: () {
                            playSound(
                                noteBrain.noteBank[caughtData1].note1);
                            playSound(
                                noteBrain.noteBank[caughtData1].note2);
                            playSound(
                                noteBrain.noteBank[caughtData1].note3);
                            playSound(
                                noteBrain.noteBank[caughtData1].note4);
                          },
                        )
                      : Container();
                },
                onAccept: (int data) {
                  print('$data');
                  caughtData1 = data;
                  isWorking = true;
                },
              ),
            ),
          ),
          SizedBox(
            width: 8,
          ),
          Expanded(
            child: Container(
              height: 70,
              color: Colors.grey.shade600,
              child: DragTarget<int>(
                builder: (context, List<int> candidateData, rejectedData) {
                  return isSuccessful
                      ? FlatButton(
                          color:
                              chordBrain.chordBank[caughtData2].buttoncolor,
                          child:
                              Text(chordBrain.chordBank[caughtData2].chord),
                          onPressed: () {
                            playSound(
                                noteBrain.noteBank[caughtData2].note1);
                            playSound(
                                noteBrain.noteBank[caughtData2].note2);
                            playSound(
                                noteBrain.noteBank[caughtData2].note3);
                            playSound(
                                noteBrain.noteBank[caughtData2].note4);
                          },
                        )
                      : Container();
                },
                onAccept: (int data) {
                  print('$data');
                  caughtData2 = data;
                  isSuccessful = true;
                },
              ),
            ),
          ),
        ],
      ),