如何从同时悬停的多个小部件中获取信息？答案

【问题标题】：How to get info from multiple widgets hovered over simoultaneously?如何从同时悬停的多个小部件中获取信息？
【发布时间】：2020-06-13 16:15:34
【问题描述】：

问题

根据下图，我有一个 4x4 的小部件网格。红线表示我所做的触摸手势。绿色方块是手势触摸的方块。蓝色方块是手势未触及的方块。

如何让 Flutter 以这种方式获取我触摸的所有小部件并存储参考，以便我可以访问它们的内容（例如图像或字符串）？

到目前为止我做了什么？

我正在查看“可拖动”小部件类型，它适用于拖动单个小部件，我可以让它与单个小部件一起使用。但是我无法让它与以这种方式拖动/触摸的多个小部件一起工作。所以我怀疑我可能需要另一种解决方案。目前我只是不确定什么可以使这个功能起作用。

示例图片

感谢您的帮助。

【问题讨论】：

您可以将Container 包装成GestureDetector 并维护自定义模型列表中每个容器的状态onTap。
是不是只有当你点击它的时候才点击，而不是当你点击其他地方并拖动它时？
你检查答案了吗？
嗨，我没有得到检查答案，因为我决定使用 React 而不是 Flutter 采用不同的方法。但是非常感谢。如果我在某个时候决定使用 Flutter，我一定会回复你。我会为您的贡献投赞成票，但由于我已将方法更改为不同的框架，因此无法选择它作为正确答案。
youtu.be/sBws8MSXN7A

标签： flutter dart flutter-layout flutter-animation

【解决方案1】：

请尝试以下示例。您可能需要根据您的要求对其进行修改。

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark()
          .copyWith(scaffoldBackgroundColor: Color.fromARGB(255, 18, 32, 47)),
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: CustomPage());
  }
}

class CustomPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CustomPageState();
  }
}

class CustomPageState extends State<CustomPage> {
  double progress = 0;

  var arr = [
    [false, false, false],
    [false, false, false],
    [false, false, false]
  ];

  var keys = [
    [new GlobalKey(), new GlobalKey(), new GlobalKey()],
    [new GlobalKey(), new GlobalKey(), new GlobalKey()],
    [new GlobalKey(), new GlobalKey(), new GlobalKey()]
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blueAccent,
      child: Center(
        //Wraps the second container in RawGestureDetector
        child: Center(
            child: GestureDetector(
          onHorizontalDragUpdate: (details) {
            changeState(details.globalPosition);
          },
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: List.generate(
                3,
                (i) => Column(
                      mainAxisSize: MainAxisSize.min,
                      children: List.generate(
                          3,
                          (j) => Container(
                                key: keys[i][j],
                                margin: EdgeInsets.all(2),
                                color: arr[i][j] ? Colors.green : Colors.red,
                                width: 50,
                                height: 50,
                              )),
                    )),
          ),
        )),
      ),
    );
  }

  void changeState(Offset pos) {
    for (int i = 0; i < 3; i++) {
      for (int j = 0; j < 3; j++) {
        Rect re = _getWidgetGlobalRect(keys[i][j]);
        if (re.contains(pos)) {
          selectItem(i, j);
        }
      }
    }
  }

  Rect _getWidgetGlobalRect(GlobalKey key) {
    RenderBox renderBox = key.currentContext.findRenderObject();
    var offset = renderBox.localToGlobal(Offset.zero);
    return Rect.fromLTWH(
        offset.dx, offset.dy, renderBox.size.width, renderBox.size.height);
  }

  void selectItem(int i, int j) {
    if (arr[i][j]) {
      return;
    }
    setState(() {
      arr[i][j] = !arr[i][j];
    });
  }
}

【讨论】：