flutter - 使用 flutter 中的手势选择列表中的项目数

Question

我是新手，必须实现一个功能来从字母列表中选择正确的单词。首先，这是我必须制作的图像。



字母表和正确的单词将来自服务器端。当时的想法是我将所有的字母表放在网格 View / ListView 中，以及何时用户将通过在字母表上使用手势来选择单词。我知道我的想法可能是错误的。如果是这样，请告诉我实现图像中给出的内容的正确方法？提前致谢。

Answer 1

在做了更多研究之后，我想我可以为您指明正确的方向，我编写了一个小型演示应用程序，应该可以帮助您，所以我找到了一篇很好的文章，解释了为什么我在嵌套接收触摸输入的小部件时遇到问题。它有点复杂，但它的要点是。如果检测到多个触摸输入，它们将在所谓的 GestureArena 中处理。并且子小部件总是获胜。您可以定义自己的 GestureFactory并使用 RawGestureDetector解决这个问题。但是，这可能比您的应用程序需要的更多，在我看来，这是更复杂的路线。我走的路线仍然只涉及GestureDetector显然，您需要对此进行扩展，因为此时它只绘制一个椭圆，但这应该很容易。

 Offset position = Offset(0, 0);
  bool isTapped = false;

  double width = 50;
  double height = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: Stack(
        children: <Widget>[
          Center(
            child: Padding(
              padding: const EdgeInsets.all(30.0),
              child: GestureDetector(
                child: GridView(
                  physics: NeverScrollableScrollPhysics(), //Very Important if
// you don't have this line you will have conflicting touch inputs and with
// gridview being the child will win
                  shrinkWrap: true,
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 4,
                    childAspectRatio: 2,
                  ),
                  children: <Widget>[
                    ...letters
                        .map(
                          (letter) => Text(
                            letter,
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              color: Colors.amber,
                              fontSize: 18,
                            ),
                          ),
                        )
                        .toList(),
                  ],
                ),
                onTapDown: (TapDownDetails details) {
                  //User Taps Screen
                  print('Global Position: ${details.globalPosition}');
                  setState(() {
                    position = Offset(
                      details.globalPosition.dx - 25,
                      details.globalPosition.dy - 25,
                    );
                    isTapped = true;
                  });
                  print(position);
                },
                onVerticalDragUpdate: (DragUpdateDetails details) {
                  print('${details.delta.dy}');
                  setState(() {
                    height += details.delta.dy;
                  });
                },
                onHorizontalDragUpdate: (DragUpdateDetails details) {
                  print('${details.delta.dx}');
                  setState(() {
                    width += details.delta.dx;
                  });
                },
                onTapCancel: () {
                  //User has released finger from screen
                  //Validate Word??
                },
              ),
            ),
          ),
          Positioned(
            top: position.dy,
            left: position.dx,
            child: Container(
              height: height,
              width: width,
              decoration: ShapeDecoration(
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30),
                  side: BorderSide(
                      color: isTapped ? Colors.blue : Colors.transparent,
                      width: 3.0),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

Flutter Deep Dive: Gestures发现这是解决这一切的非常有用的关键。