FLUTTER - DRAGGABLE & DRAG TARGET - 如何处理“on will accept”和“on accept”参数

如何解决FLUTTER - DRAGGABLE & DRAG TARGET - 如何处理“on will accept”和“on accept”参数

我正在构建一个小型 ANAGRAM 游戏，以学习如何使用 Flutter 中的“拖放”功能。

我已经设法编写了一些代码，但是由于某种原因，拖动目标中似乎从未接受拖动的“字母”....我可能以错误的方式使用了“on will accept”参数。

代码如下：

class Anagram extends StatefulWidget {
  static const String id = 'anagram';
  final String? word;
  Anagram({@required this.word});

  @override
  _AnagramState createState() => _AnagramState();
}

class _AnagramState extends State<Anagram> {

  @override
  Widget build(BuildContext context) {
    List letters = widget.word!.split("");
    letters.shuffle();
    print(letters);
    return Scaffold(
      backgroundColor: Colors.indigo[900],appBar: AppBar(
        backgroundColor: Colors.white,elevation: 0,automaticallyImplyLeading: false,leading: IconButton(
            icon: Icon(Icons.arrow_back_ios_rounded,color: Colors.red[400],size: 25.0),onpressed: () {
              Navigator.pop(context);
            }),title: Center(
          child: Text(
            'ANAGRAMS',style: TextStyle(color: Colors.indigo[900],fontSize: 20),),actions: [
          Container(
            margin: const EdgeInsets.only(right: 10),child: Icon(Icons.memory,size: 45,color: Colors.red[900]),],body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,children: [
          Row(mainAxisAlignment: MainAxisAlignment.center,children: [
            ...letters.map((e) {
              return TargetBox(letter: e);
            }),]),Row(mainAxisAlignment: MainAxisAlignment.center,children: [
            ...letters.map((e) => DragBox(letter: e)),);
  }
}

class DragBox extends StatelessWidget {
  const DragBox({
    required this.letter,});

  final String letter;

  @override
  Widget build(BuildContext context) {
    return Draggable<String>(
      Feedback: LetterBox(letter: letter),child: LetterBox(letter: letter),childWhenDragging: LetterBox(letter: ' '),);
  }
}

class TargetBox extends StatelessWidget {
  const TargetBox({
    required this.letter,});

  final String letter;

  @override
  Widget build(BuildContext context) {
    return DragTarget<String>(
        builder: (context,candidateData,rejectedData) {
          return LetterBox(letter: ' ');
        },onWillAccept: (data) => data == letter,onAccept: (data) {
          print('Je suis la');
          print(data);
          print(letter);
        },onLeave: (data) {
          print('Voici data : $data');
          print('Je suis parti');
          print('Voici Letter : $letter');
        });
  }
}

class LetterBox extends StatelessWidget {
  const LetterBox({
    required this.letter,});

  final String letter;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,width: 40,margin: const EdgeInsets.all(5),padding: const EdgeInsets.all(4),decoration: Boxdecoration(
          color: Colors.white,borderRadius: BorderRadius.all(
            Radius.circular(10),border: Border.all(
            width: 1,color: Colors.indigo[900]!,)),child: Center(
        child: Text(
          letter.toupperCase(),style: TextStyle(
            color: Colors.red[900],fontSize: 18,);
  }
}

我也尝试过这些更改：但同样的问题：数据始终为空：

class TargetBox extends StatelessWidget {
  const TargetBox({
    required this.letter,});

  final String letter;

  @override
  Widget build(BuildContext context) {
    return DragTarget<DragBox>(
        builder: (context,onWillAccept: (data) => data == DragBox(letter: letter),onLeave: (data) {
          print('Voici data : $data');
          print('Je suis parti');
          print('Voici Letter : $letter');
        });
  }
}

解决方法

我找到了问题的答案：我忘记在 DRAGGABLE 对象中指定 DATA 字段...