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

Question

问题

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

如何使flutter获取以这种方式接触的所有小部件并存储引用，以便我可以访问它们的内容(例如图像或字符串)？

我到目前为止做了什么？

我正在查看“可拖动”窗口小部件类型，它可用于拖动单个窗口小部件，我可以将其与单个窗口小部件一起使用。但是我无法通过这种方式来拖拽/触摸多个小部件。所以我怀疑我可能需要其他解决方案。目前，我只是不确定什么可以使此功能正常工作。

示例图片



谢谢你的帮助。

Answer 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];
    });
  }
}