Question

我正在颤抖地编写国际象棋游戏。

这是我的代码的相关位：

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} ,
    );
  }

}

现在的问题是，我可以将其精细拖动，但不能放下它们。 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.
}

我认为，如果您将索引系统更改为您拥有的自定义对象，这也将对您有用。

请告诉我这是否有帮助。

DragTarget小部件没有响应

1 个答案: