通过滑动进行颤动多个字母选择（运动事件）

Question

我需要通过拖动字母来创建单词。\n我进行了搜索，但找不到足够的代码来检测运动事件。\n我想通过用手指滑动来选择多个字母，并从所选字母创建单词。\n我需要制作一个如下所示的单词益智游戏。\ n\n我怎样才能制作这样的游戏？\n\xc2\xa0

\n

Answer 1

我想这正是你想要的。

\n

import 'package:flutter/material.dart';\nimport 'dart:math' as math;\n\nimport 'package:flutter/services.dart';\n\nclass DrawPatternGame extends StatefulWidget {\n  const DrawPatternGame({Key? key}) : super(key: key);\n\n  @override\n  State<DrawPatternGame> createState() => _DrawPatternGameState();\n}\n\nclass _DrawPatternGameState extends State<DrawPatternGame> {\n  List<String> stringList = ["E", "L", "A", "K", "\xc4\xb0", "N", "U", "G"];\n  List<String> selectedLetter = [];\n\n  double radius = 80;\n  List<Offset> endLineOffsetList = [];\n  List<Offset> letterOffsetList = [];\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(\n        title: Text("Draw Game"),\n      ),\n      body: Column(\n        mainAxisAlignment: MainAxisAlignment.spaceAround,\n        children: [\n          Container(\n            height: 300,\n            color: Colors.green,\n            child: Center(\n                child: Container(\n              padding: selectedLetter.isNotEmpty\n                  ? EdgeInsets.fromLTRB(8, 8, 8, 0)\n                  : EdgeInsets.zero,\n              decoration: BoxDecoration(\n                  color: Colors.pink, borderRadius: BorderRadius.circular(32)),\n              child: Text(\n                selectedLetter.toSet().join(),\n                textAlign: TextAlign.center,\n                style: TextStyle(\n                  color: Colors.white,\n                  letterSpacing: 8,\n                  fontSize: 32,\n                  fontWeight: FontWeight.bold,\n                ),\n              ),\n            )),\n          ),\n          Center(\n            child: GestureDetector(\n              onPanStart: (details) {\n                Offset correctedOffset = Offset(details.localPosition.dx - 104,\n                    details.localPosition.dy - 104);\n                for (var i = 0; i < letterOffsetList.length; i++) {\n                  if ((correctedOffset - (letterOffsetList[i])).distance < 24 &&\n                      !selectedLetter.contains(stringList[i])) {\n                    selectedLetter.add(stringList[i]);\n                    print(stringList[i]);\n\n                    endLineOffsetList\n                      ..add(letterOffsetList[i])\n                      ..add(letterOffsetList[i]);\n                    setState(() {});\n                    letterOffsetList = [];\n                    break;\n                  }\n                }\n              },\n              onPanUpdate: (details) {\n                if (endLineOffsetList.isNotEmpty &&\n                    selectedLetter.length < stringList.length) {\n                  Offset correctedOffset = Offset(\n                      details.localPosition.dx - 104,\n                      details.localPosition.dy - 104);\n                  endLineOffsetList[endLineOffsetList.length - 1] =\n                      correctedOffset;\n                  for (var i = 0; i < letterOffsetList.length; i++) {\n                    if ((correctedOffset - (letterOffsetList[i])).distance <\n                            24 &&\n                        !selectedLetter.contains(stringList[i])) {\n                      endLineOffsetList[endLineOffsetList.length - 1] =\n                          letterOffsetList[i];\n                      selectedLetter.add(stringList[i]);\n                      endLineOffsetList.add(letterOffsetList[i]);\n                      print(stringList[i]);\n                      Feedback.forTap(context);\n\n                      break;\n                    }\n                  }\n                  setState(() {});\n                  letterOffsetList = [];\n                }\n              },\n              onPanEnd: (details) {\n                selectedLetter = [];\n\n                endLineOffsetList = [];\n\n                setState(() {});\n              },\n              child: Stack(\n                alignment: Alignment.center,\n                children: [\n                  CircleAvatar(\n                    radius: radius + 32,\n                  ),\n                  CustomPaint(\n                    painter: LinePainter(endLineOffsetList: endLineOffsetList),\n                  ),\n                  ...List.generate(\n                    stringList.length,\n                    (i) {\n                      letterOffsetList.add(Offset(\n                          radius *\n                              math.cos(2 * i * math.pi / stringList.length),\n                          radius *\n                              math.sin(2 * i * math.pi / stringList.length)));\n                      return Transform.translate(\n                        offset: letterOffsetList[i],\n                        child: CircleAvatar(\n                          backgroundColor:\n                              selectedLetter.contains(stringList[i])\n                                  ? Colors.pink\n                                  : null,\n                          child: SizedBox(\n                            width: 32,\n                            height: 32,\n                            child: Text(\n                              stringList[i],\n                              textAlign: TextAlign.center,\n                              style: TextStyle(\n                                color: Colors.white,\n                                fontSize: 32,\n                                fontWeight: FontWeight.bold,\n                              ),\n                            ),\n                          ),\n                        ),\n                      );\n                    },\n                  )\n                ],\n              ),\n            ),\n          )\n        ],\n      ),\n    );\n  }\n}\n\nclass LinePainter extends CustomPainter {\n  final List<Offset>? endLineOffsetList;\n  LinePainter({this.endLineOffsetList});\n  @override\n  void paint(Canvas canvas, Size size) {\n    var paint = Paint()\n      ..color = Colors.pink\n      ..strokeWidth = 5\n      ..strokeCap = StrokeCap.round;\n    if (endLineOffsetList != null && endLineOffsetList!.length >= 2) {\n      for (var i = 0; i < endLineOffsetList!.length - 1; ++i) {\n        canvas.drawLine(\n            endLineOffsetList![i], endLineOffsetList![i + 1], paint);\n      }\n    }\n  }\n\n  @override\n  bool shouldRepaint(LinePainter oldDelegate) => true;\n\n  @override\n  bool shouldRebuildSemantics(LinePainter oldDelegate) => true;\n}\n

\n

Answer 2

您应该尝试使用 GestureDetector 并在 Flutter 中使用其平移拖动手势

为此，您只需将 GestureDetector 作为包含字母的圆形小部件的父级，并检测正在拖动的内容。