Flutter: comment afficher le prochain index après avoir terminé une logique spécifique dans Swiper, où GridView est également défini dans Swiper?
J'essaye de faire un jeu de mots. Tout d'abord, l'index sera blanc. si l'utilisateur clique sur la bonne réponse, l'index sera de couleur verte et passera à l'écran suivant, l'index sera également blanc dans l'écran suivant. page suivante jusqu'à ce que l'utilisateur mette la bonne réponse ...
J'ai défini un GridView dans Swiper (Swiper a pris en important, import 'package: flutter_swiper / flutter_swiper.dart';). et je veux afficher le prochain index de Swiper après avoir terminé une logique dans GridView. supposons que j'ai une longue liste de chaînes (tableau) et ai pris quatre chaînes de valeur de cette liste (tableau) par hasard, cette chaîne de quatre valeurs définie dans l'index GridView.
Encore une fois, je crée une nouvelle liste de chaînes (tableau) par cette chaîne de quatre valeurs et j'ai pris une valeur de cette nouvelle liste de chaînes (tableau) par hasard, cette chaîne unique définie dans Swiper. Enfin, si l'utilisateur peut sélectionner correctement la valeur d'index Swiper sur la valeur d'index GridView quatre, l'utilisateur peut voir l'écran suivant dans Swiper. mais la sortie ne fonctionne pas correctement. Le problème est - au début, je mets la couleur blanche dans l'index GridView, si c'est la bonne réponse devrait être la couleur verte dans l'index GridView et incorrecte sera la couleur rouge dans l'index GridView. voici ma logique a fait le désordre.
import 'package:flutter_swiper/flutter_swiper.dart';
import 'dart:math';
class GameWordRoute extends StatefulWidget {
@override
_GameWordRouteState createState() => _GameWordRouteState(); }
class _GameWordRouteState extends State<GameWordRoute> {
SwiperController _controller = SwiperController();
SwiperControl _control = SwiperControl(color: Colors.white);
double get _width => MediaQuery.of(context).size.width;
double get _height => MediaQuery.of(context).size.height;
bool inLastPage = true;
bool _answer = false;
List<Color> colorList = <Color>[Colors.white, Colors.white, Colors.white, Colors.white,];
List<String> gameButtonList = <String>[];
FlutterTts flutterTts = FlutterTts();
@override
Widget build(BuildContext context) {
var sizeDevice = MediaQuery.of(context).size;
final orientation = MediaQuery.of(context).orientation;
final double itemHeight = sizeDevice.width / 6;
final double itemWidth = sizeDevice.width / 2;
return Scaffold(
backgroundColor: Colors.purple, // white
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
color: Colors.lightBlueAccent,
)),
Expanded(
flex: 8,
child: Container(
color: Colors.cyan,
child: Swiper(
controller: _controller,
loop: false,
scrollDirection: Axis.horizontal,
itemCount: word_data.drink.length,
onIndexChanged: (value) {
if (value == word_data.drink.length - 1)
setState(() {
inLastPage = true;
});
else {
setState(() {
inLastPage = true; // false
});
}
},
itemBuilder: (BuildContext context, int index) {
gameButtonList.clear();
var fourValueRandom = new Random();
for (var i = 0; i < 4; i++) {
final fourGameBtnRandom = word_data.drink[fourValueRandom.nextInt(word_data.drink.length)];
gameButtonList.add(fourGameBtnRandom);
}
var oneValueRandom = new Random();
var oneValueRandomGet = gameButtonList[oneValueRandom.nextInt(gameButtonList.length)];
var wordDataReplace = oneValueRandomGet.replaceAll(" ", "_").toLowerCase();
return Container(
child: Column(
children: <Widget>[
Expanded(
flex: 8,
child: Container(
color: Colors.purple,
width: _width,
alignment: Alignment.center,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Image.asset("asset/drink_images/" + wordDataReplace + ".png",
fit: BoxFit.contain,
),
),
)),
Expanded(
flex: 1,
child: Container(
color: Colors.yellow,
width: _width,
alignment: Alignment.center,
// "${categoryTitleArray[index]}" child: Text("What is this?"), )), Expanded( flex: 4, child: Container( color: Colors.yellow[200], width: _width, alignment: Alignment.center, child: GridView.builder( padding: EdgeInsets.all(8), itemCount: 4, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: (orientation == Orientation.portrait) ? 2 : 4, crossAxisSpacing: 5, mainAxisSpacing: 5, childAspectRatio: (itemWidth / itemHeight), ), itemBuilder: (BuildContext context, int index) { return GestureDetector( onTap: () { if (index == 0) { if (gameButtonList[0] == oneValueRandomGet){ _answer = true; inLastPage = false; colorList[0] = Colors.green; setState((){}); _showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green); }else{ colorList[0] = Colors.red; inLastPage = true; setState((){}); } } else if (index == 1) { if (gameButtonList[1] == oneValueRandomGet){ _answer = true; colorList[1] = Colors.green; setState((){}); _showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green); inLastPage = false; }else{ colorList[1] = Colors.red; inLastPage = true; setState((){}); } } else if (index == 2) { if (gameButtonList[2] == oneValueRandomGet){ _answer = true; colorList[2] = Colors.green; setState((){}); _showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green); inLastPage = false; }else{ colorList[2] = Colors.red; inLastPage = true; setState((){}); } } else if (index == 3) { if (gameButtonList[3] == oneValueRandomGet){ _answer = true; colorList[3] = Colors.green; inLastPage = false; setState((){}); _showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green); }else{ colorList[3] = Colors.red; inLastPage = true; setState((){}); } } }, child: Container( child: new Card( elevation: 0, color: colorList[index], //Colors.transparent, child: Center( child: Text( "${gameButtonList[index]}",
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black),
),
),
),
),
);
}),
)),
],
),
);
},
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.lightBlueAccent,
)),
],
),
),
);
}
void _showCorrectAndIncorrectDialog(String _title, String _image, String _subTitle, Color _color){
showDialog(
context: context,
builder: (BuildContext context){
Future.delayed(Duration(milliseconds: 500), () {
Navigator.of(context).pop(true);
});
return AlertDialog(
title: Text(_title, textAlign: TextAlign.center, style: TextStyle(color: _color),),
content: Container(
height: _width/1.1,
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
// color: Colors.cyan[100],
child: Image.asset(_image,
fit: BoxFit.cover,
),
),
),
SizedBox(height: 8),
Expanded(
flex: 1,
child: Container(
color: Colors.cyan,
child: Center(
child: Text(
_subTitle,
style: TextStyle(
// fontSize: 24,
),
),
),
),
),
],
),
),
);
}
);
}
}
Réponses
Donc, la première chose à faire est de changer votre fonction onTap dans votre détecteur de gestes en un code plus simple Vous ne devriez pas vérifier chaque numéro de l'index car l'index est déjà ce numéro
Pour être plus clair lorsque vous appelez la liste [index], l'index ici est un entier donc si l'index == 1 vous appelez la liste [1] et si l'index == 5 vous appelez la liste [5] vous ne le faites pas ' Je dois tester si index == 1 ou quelque chose comme ça
donc votre code devrait être quelque chose comme ça
onTap: () async{
if (gameButtonList[index] == oneValueRandomGet){
_answer = true;
colorList[index] = Colors.green;
inLastPage = false;
setState((){});
_showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green);
}else{
colorList[index] = Colors.red;
inLastPage = true;
setState((){});
}
},
Et ensuite pour le problème de tester si la réponse est correcte ou non et de changer de couleur et de passer à l'écran suivant
Tout d'abord, déplacez ces lignes dans votre fonction de création d'éléments dans une fonction que vous pouvez appeler de n'importe où comme celle-ci, par exemple
void newQuestion(){
gameButtonList.clear();
var fourValueRandom = new Random();
for (var i = 0; i < 4; i++) {
final fourGameBtnRandom = word_data.drink[fourValueRandom.nextInt(word_data.drink.length)];
gameButtonList.add(fourGameBtnRandom);
}
oneValueRandomGet = gameButtonList[fourValueRandom.nextInt(gameButtonList.length)];
wordDataReplace = oneValueRandomGet.replaceAll(" ", "_").toLowerCase();
}
et vous pouvez appeler cette question après avoir appelé votre dialogAlert si vous modifiez la ligne lorsque vous appelez _showCorrectAndIncorrectDialog (...) dans
_showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green);
newQuestion() //**Add this line also**
Remarques :
-N'oubliez pas de déclarer les variables dont vous avez besoin dans votre classe afin qu'elles soient modifiées dans la fonction newQuestion
-La première fois que vous déjeunez dans l'application, les variables telles que "oneValueRandomGet" seront nulles, vous ne pouvez donc pas afficher de données, appelez oneQuestion () dans votre initState afin que lors du lancement de l'application, vous prépariez votre première question directement.
J'espère que tout cela ne vous confond pas j'ai fait de mon mieux pour simplifier et vous donner la modification et la réponse la plus simple possible, s'il vous plaît si vous ne parvenez toujours pas à résoudre votre problème, je vous conseillerais vraiment d'essayer de réécrire votre code et d'essayer de faites-le aussi simple que possible.
Je vous remercie.