[英]I'm trying to make a selection of words by clicking from which these words are moved into cells
I'm trying to make a selection of words by clicking from which these words are moved into cells.我正在尝试通过单击将这些单词移入单元格来选择单词。 I've done this with Draggable and DragTarget so far it works if you move your finger.
到目前为止,我已经使用 Draggable 和 DragTarget 完成了此操作,如果您移动手指,它就可以工作。
But I need to be able to move them by clicking.但是我需要能够通过单击来移动它们。
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,
);
}
}
How can this be done?如何才能做到这一点?
I know there is a property onDragStarted: but I don't fully understand how to use it correctly.我知道有一个属性 onDragStarted: 但我不完全理解如何正确使用它。 Somebody help me please.
请有人帮助我。
Maybe the GestureDetector class and its onTag
or onTapUp
parameter could be helpful.也许GestureDetector类及其
onTag
或onTapUp
参数会有所帮助。 If you want to detect clicks/taps, why use a dragging related widget?如果你想检测点击/点击,为什么要使用拖动相关的小部件?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.