flutter - DragTarget 小部件没有响应

Question

我正在用 flutter 编写国际象棋游戏。

这是我的代码的相关部分:

class Rank extends StatelessWidget {
  final _number;

  Rank(this._number);

  @override
  Widget build(BuildContext context) {
    var widgets = <Widget>[];
    for (var j = 'a'.codeUnitAt(0); j <= 'h'.codeUnitAt(0); j++) {
      widgets
          .add(
              DroppableBoardSquare(String.fromCharCode(j) + this._number.toString())
          );
          //
    }
    return Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: widgets);
  }
}
class DroppableBoardSquare extends StatelessWidget {
  final String _coordinate;

  const DroppableBoardSquare(this._coordinate) ;

  @override
  Widget build(BuildContext context) {
    return DragTarget(
      builder:(BuildContext context, List candidate, List rejectedData){
      return BoardSquare(_coordinate);
    },
        onAccept: (data ) {
          print('Accepted');
        },
    onWillAccept: (data){
    return true;
    },
    onLeave: (data) => print("leave"),);

  }

}
class BoardSquare extends StatelessWidget {
  final String _coordinate;

  BoardSquare(this._coordinate);

  @override
  Widget build(BuildContext context) {
    ChessBloc bloc = ChessBlocProvider.of(context);
    return
        StreamBuilder<chess.Chess>(
        stream: bloc.chessState,
        builder: (context, AsyncSnapshot<chess.Chess> chess) {
          return DraggablePieceWidget(chess.data.get(_coordinate), _coordinate);

        });
  }
}

class DraggablePieceWidget extends StatelessWidget {
  final chess.Piece _piece;

  final String _coordinate;


  DraggablePieceWidget(this._piece, String this._coordinate);

  @override
  Widget build(BuildContext context) {
    return Draggable(
      child: PieceWidget(_piece),
      feedback: PieceWidget(_piece),
      childWhenDragging: PieceWidget(null),
      data: {"piece": _piece, "origin": _coordinate} ,
    );
  }

}

现在的问题是我可以很好地拖动这 block ，但不能放下它们。 DragTarget 上的所有方法都没有被调用。

我做错了什么？

Answer 1

我开发了一个拖放式照片网格，您可以在其中拖动照片以根据数字索引对其重新排序。

我认为，从本质上讲，它与您拥有的棋盘概念是一回事。

出现此问题的原因可能是 Draggable (DraggablePieceWidget) 元素位于 DragTarget (DroppableBoardSquare) 内。

在我的应用程序中，我采用了相反的方式 - 我将 DragTarget 放入 Draggable 中。

提供一些伪代码作为例子:

int _dragSelectedIndex;
int _draggingIndex;

// Basically this is what you'd use to build every chess item
Draggable(
  maxSimultaneousDrags: 1,
  data: index,
  onDragStarted: () { _draggingIndex = index; print("Debug: drag started"); }, // Use setState for _draggingIndex, _dragSelectedIndex.
  onDragEnd: (details) { onDragEnded(); _draggingIndex = null; print("Debug: drag ended; $details"); },
  onDraggableCanceled: (_, __) { onDragEnded(); _draggingIndex = null; print("Debug: drag cancelled."); },
  feedback: Material(type: MaterialType.transparency, child: Opacity(opacity: 0.85, child: Transform.scale(scale: 1.1, child: createDraggableBlock(index, includeTarget: false)))),
  child: createDraggableBlock(index, includeTarget: true),
);

// This func is used in 2 places - Draggable's `child` & `feedback` props.
// Creating dynamic widgets through functions is a bad practice, switch to StatefulWidget if you'd like.
Widget createDraggableBlock(int index, { bool includeTarget = true }) {
  if (includeTarget) {
    return DragTarget(builder: (context, candidateData, rejectedData) {
      if (_draggingIndex == index || candidateData.length > 0) {
        return Container(); // Display empty widget in the originally selected cell, and in any cell that we drag the chess over.
      }
      // Display a chess, but wrapped in DragTarget widget. All chessboard cells will be displayed this way, except for the one you start dragging.
      return ChessPiece(..., index: index);
    }, onWillAccept: (int elemIndex) {
      if (index == _draggingIndex) {
        return false; // Do not accept the chess being dragged into it's own widget
      }
      setState(() { _dragSelectedIndex = index; });
      return true;
    }, onLeave: (int elemIndex) {
      setState(() { _dragSelectedIndex = null; });
    });
  }
  // Display a chess without DragTarget wrapper, e.g. for the draggable(feedback) widget
  return ChessPiece(..., index: index);
}

onDragEnded() {
  // Check whether _draggingIndex & _dragSelectedIndex are not null and act accordingly.
}

我假设如果您将索引系统更改为您拥有的自定义对象 - 这也适用于您。

如果这有帮助，请告诉我。