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

Question

我正在构建一个小型 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,
          ),
        ),
      ),
    );
  }
}

我也尝试了这些更改：但同样的问题：DATA 始终为 NULL：

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

  final String letter;

  @override
  Widget build(BuildContext context) {
    return DragTarget<DragBox>(
        builder: (context, candidateData, rejectedData) {
          return LetterBox(letter: ' ');
        },
        onWillAccept: (data) => data == DragBox(letter: 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');
        });
  }
}

Answer 1

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