#flutter #listview #drag-and-drop #dragtarget
Вопрос:
я новичок в dart, я пытался создать игру с глаголами с перетаскиванием, я создал модель, затем перетаскиваемый виджет и цель перетаскивания, затем я создаю представление списка с данными, которые я вытолкнул из основного, но проблема в том, что я не нашел, как удалить виджет из списка после его перетаскивания в нужное место, я ооочень стек, поэтому, пожалуйста, если кто-нибудь может мне помочь, я буду благодарен
это класс
import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:templates/Model/equation.model.dart'; import 'package:confetti/confetti.dart'; class Equations extends StatefulWidget { final Equation equation; Equations(this.equation); @override _EquationsState createState() =gt; _EquationsState(); } ConfettiController confettiController = ConfettiController(duration: Duration(seconds: 2)); class _EquationsState extends Statelt;Equationsgt; { bool showIcons = false; Listlt;Stringgt; responses = []; bool checkResults() { bool result = true; for (int i = 0; i lt; responses.length; i ) { if (widget.equation.props[i].result.toString() != responses[i]) { result = false; } } return result; } @override void initState() { // TODO: implement initState super.initState(); responses = List.filled(widget.equation.props.length, ""); } @override Widget build(BuildContext context) { return SafeArea( child: Scaffold( backgroundColor: Colors.grey[300], body: Container( height: MediaQuery.of(context).size.height, width: MediaQuery.of(context).size.width, decoration: BoxDecoration( image: DecorationImage( image: AssetImage('assets/images/bg.png'), fit: BoxFit.cover)), child: SingleChildScrollView( child: Stack( children: [ Align( alignment: Alignment.center, child: ConfettiWidget( confettiController: confettiController, colors: [ Colors.red, Colors.blue, Colors.green, Colors.yellow, Colors.purple, Colors.pink, Colors.brown ], shouldLoop: true, numberOfParticles: 28, emissionFrequency: 0.07, blastDirectionality: BlastDirectionality.explosive, gravity: 0.1, minBlastForce: 12, maxBlastForce: 16, ), ), Column( children: [ SizedBox( height: 10, ), FittedBox( child: Text( widget.equation.question, style: TextStyle(fontSize: 24), ), fit: BoxFit.scaleDown, ), SizedBox( height: 10, ), ListView.builder( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), itemCount: widget.equation.props.length, itemBuilder: (context, index) { return Padding( padding: const EdgeInsets.all(10.0), child: Container( decoration: BoxDecoration( color: Colors.white, border: Border.all( color: Colors.blueAccent, width: 4), borderRadius: BorderRadius.circular(10), ), child: Padding( padding: const EdgeInsets.all(8.0), child: Row( children: [ FittedBox( child: Text( widget.equation.props[index].fields, style: TextStyle(fontSize: 18), ), fit: BoxFit.scaleDown, ), Spacer(), Container( width: 50, child: TextField( keyboardType: TextInputType.number, onChanged: (value) { String removeSpace = value.replaceAll(" ", ""); String replaceVirgule = removeSpace .replaceAll(",", "."); responses[index] = replaceVirgule; print("before :" value); print("after :" replaceVirgule); }, ), ), SizedBox( width: 10, ), Icon( showIcons ? widget.equation.props[index].result.toString() == responses[index] ? Icons.verified : Icons.error : null, color: widget.equation.props[index].result.toString() == responses[index] ? Colors.green : Colors.red, ) ], ), ), ), ); }), SizedBox( height: 10, ), Container( width: MediaQuery.of(context).size.width * 0.7, child: ElevatedButton( onPressed: () { if (checkResults()) { confettiController.play(); Future.delayed(const Duration(seconds: 5), () { confettiController.stop(); }); } setState(() { showIcons = true; }); }, child: Text( 'الإجابة', style: TextStyle(fontSize: 20), )), ) ], ), ], )), ))); } }
это виджеты цели перетаскивания и перетаскиваемой
import 'package:flutter/material.dart'; import 'package:templates/Model/verbe.model.dart'; class DragWidget extends StatelessWidget { final String title_data; //dragoble final String title_drag; final Color colors_d; //feedback final String title_fb; final Color colors_fb; //childwhen it is darged final String title_child; final Color colors_child; DragWidget( {Key? key, required this.title_data, required this.title_child, required this.title_drag, required this.title_fb, required this.colors_child, required this.colors_d, required this.colors_fb}) : super(key: key); @override Widget build(BuildContext context) { return Draggablelt;Stringgt;( // Data is the value this Draggable stores. data: title_data, child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), // radius of 10 color: colors_d, // green as background color ), height: 100, width: 100.0, // color: colors_d, child: Center( child: Text( title_drag, textScaleFactor: 2, ), ), ), feedback: Material( child: Container( height: 50.0, width: 100.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), // radius of 10 color: colors_fb, ), child: Center( child: Text( title_fb, textScaleFactor: 2, ), ), ), ), childWhenDragging: Container( height: 50.0, width: 100.0, decoration: BoxDecoration( borderRadius: BorderRadius.circular(15), // radius of 10 color: colors_child, // green as background color ), child: Center( child: Text( title_child, textScaleFactor: 2, ), ), ), ); } } class DargTarget1 extends StatefulWidget { bool isDroped; String title_data; String part1; String part2; String prop; DargTarget1({ Key? key, required this.title_data, required this.prop, required this.part1, required this.part2, required this.isDroped, }); @override Statelt;DargTarget1gt; createState() =gt; _DargTarget1State(); } class _DargTarget1State extends Statelt;DargTarget1gt; { @override Widget build(BuildContext context) { return Container( child: Column( children: [ DragTargetlt;Stringgt;( builder: ( BuildContext context, Listlt;dynamicgt; accepted, Listlt;dynamicgt; rejected, ) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( widget.part1, style: TextStyle(fontSize: 18, color: Colors.black), ), SizedBox( width: 10, ), DottedBorder( borderType: BorderType.RRect, radius: Radius.circular(12), padding: EdgeInsets.all(6), color: Colors.black, strokeWidth: 2, dashPattern: [6], child: ClipRRect( borderRadius: BorderRadius.all(Radius.circular(12)), child: Container( height: 30, width: 60, color: widget.isDroped ? Colors.green : null, child: Center( child: Text( !widget.isDroped ? '......' : widget.prop, style: TextStyle( color: Colors.black, fontSize: 25))), ), ), ), SizedBox( width: 10, ), Text( widget.part2, style: TextStyle(fontSize: 18, color: Colors.black), ), SizedBox( width: 10, ), ], ); }, onAccept: (data) { setState(() { showSnackBarGlobal(context, 'أحسنت'); widget.isDroped = true; }); }, onWillAccept: (data) { return data == widget.title_data; }, onLeave: (data) { showSnackBarGlobal(context, 'خطأ'); }, ), ], ), ); } void showSnackBarGlobal(BuildContext context, String message) { ScaffoldMessenger.of(context).removeCurrentSnackBar(); ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text( message, textScaleFactor: 2, ))); } } //this function remove data from the list
это модель, с которой я работаю
Listlt;Verbegt; verbe; Verbes(this.verbe); } class Verbe { String part1; String part2; bool isDropped; String data_test0; String prop; Verbe(this.isDropped, this.data_test0, this.prop, this.part1, this.part2); }
и это данные, которые я отправляю из главного
Listlt;Verbegt; itemsVerbess = [ Verbe(false, 'a', 'ferai', "je", ""), Verbe(false, 'b', 'feras', "tu", ""), Verbe(false, 'c', 'fera', "il", ""), Verbe(false, 'd', 'ferons', "nous", ""), Verbe(false, 'e', 'ferez', "vous", ""), Verbe(false, 'f', 'feront', "ils", "") ];
Ответ №1:
Если я правильно понимаю, я вижу решение следующим образом:
- Создайте флаг isDraggedToTarget = false;
- Когда он перетаскивается, вызовите setState и установите флаг в значение true
- В разделе виджет в ListView напишите такое условие:
если(isDraggedToTarget!=верно)
Контейнер(),
Поэтому, когда флаг ложен, вы увидите виджет, и он исчезнет, если флаг верен
Комментарии:
1. нет необходимости добавлять новый флаг, потому что у меня есть widget.verbess.verbe[индекс].Сбрасывается изменение состояния каждый раз, когда я попадаю в цель
2. или я не понял, что ты имеешь в виду