问题
根据下面的图形,我有一个4x4的小部件网格。红线表示我做出的触摸手势。绿色方块是手势触摸的方块。蓝色正方形是手势未触摸的正方形。
如何使Flutter获取我以这种方式接触的所有小部件并存储引用,以便我可以访问它们的内容(例如图像或字符串)?
到目前为止我做了什么?
我正在查看“可拖动”小部件类型,它适用于拖动单个小部件,我可以将其与单个小部件一起使用。但是我无法让它与以这种方式被拖动/触摸的多个小部件一起使用。所以我怀疑我可能需要其他解决方案。目前,我只是不确定什么可以使此功能正常工作。
示例图像
感谢您的帮助。
请尝试以下示例。您可能需要根据需要对其进行修改。
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];
});
}
}