我正在尝试通过单击将这些单词移动到单元格中来选择单词

Question

我试图通过点击这些单词移动到单元格中来选择单词。到目前为止，我已经在Draggable和DragTarget中做过了，如果你移动手指，它就会起作用。

但是我需要能够通过点击来移动它们。

import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class Screen6_1_3 extends StatefulWidget {
const Screen6_1_3({super.key});
@override
State<Screen6_1_3> createState() => _Screen6_1_3State();
}
class _Screen6_1_3State extends State<Screen6_1_3> {
var caughtAnimation1;
var caughtAnimation2;
var caughtAnimation3;
//
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue,
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.blue,
leading: GestureDetector(
child: Icon(
Icons.close,
color: Colors.white,
),
onTap: () {
Navigator.pushNamedAndRemoveUntil(
context, "home", (route) => false);
},
),
),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DragTarget(
onAccept: (LottieBuilder animation) {
setState(() {
caughtAnimation1 = animation;
});
},
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
return Center(
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(20.0)),
child: caughtAnimation1,
),
);
},
),
Padding(
padding: const EdgeInsets.all(8.0),
child: DragTarget(
onAccept: (LottieBuilder animation) {
setState(() {
caughtAnimation2 = animation;
});
},
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
return Center(
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(20.0)),
child: caughtAnimation2,
),
);
},
),
),
DragTarget(
onAccept: (LottieBuilder animation) {
setState(() {
caughtAnimation3 = animation;
});
},
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
return Center(
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(20.0)),
child: caughtAnimation3,
),
);
},
),
],
),
Row(
children: [
SizedBox(
height: 20,
),
],
),
// Draggable
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(left: 10.0, right: 10.0),
child: Container(
width: 200,
height: 60,
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(20.0)),
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
Container(
width: 15,
),
DragBox(
animatedAsset: Lottie.asset('assets/sunny.json'),
width: 40,
),
Container(
width: 15,
),
DragBox(
animatedAsset: Lottie.asset('assets/cat.json'),
width: 40,
),
Container(
width: 15,
),
DragBox(
animatedAsset: Lottie.asset('assets/scanning.json'),
width: 40,
),
//More drag boxes like this one
],
),
),
),
],
),
],
),
);
}
}
class DragBox extends StatefulWidget {
DragBox({required this.animatedAsset, required this.width});
final LottieBuilder animatedAsset;
final double width;
@override
_DragBoxState createState() => _DragBoxState();
}
class _DragBoxState extends State<DragBox> {
var caughtAnimation3;
@override
Widget build(BuildContext context) {
return Draggable(
onDragStarted: () {
setState(() {
DragTarget(
onAccept: (LottieBuilder animation) {
setState(() {
caughtAnimation3 = animation;
});
},
builder: (BuildContext context, List<dynamic> candidateData,
List<dynamic> rejectedData) {
return Center(
child: Container(
height: 60,
width: 60,
decoration: BoxDecoration(
color: Colors.grey.shade400.withOpacity(0.5),
borderRadius: BorderRadius.circular(20.0)),
child: caughtAnimation3,
),
);
},
);
});
},
feedback: Container(
width: 50,
height: 50,
child: widget.animatedAsset,
),
child: Container(
child: widget.animatedAsset,
width: widget.width,
height: 50,
),
childWhenDragging: Container(),
data: widget.animatedAsset,
);
}
}

如何做到这一点?

我知道有一个属性onDragStarted:但我不完全明白如何正确使用它。谁来帮帮我。

Answer 1

也许gestredetector类及其onTag或onTapUp参数会有所帮助。如果你想检测点击/点击，为什么要使用与拖动相关的小部件呢?