Flattern: Wie wird der nächste Index angezeigt, nachdem eine bestimmte Logik in Swiper abgeschlossen wurde, wobei GridView auch in Swiper festgelegt wurde?
Ich versuche ein Wortspiel zu machen. Zunächst wird der Index weiß sein. Wenn der Benutzer auf die richtige Antwort klickt, wird der Index grün und der nächste Bildschirm angezeigt. Der Index wird im nächsten Bildschirm ebenfalls weiß. Wenn der Benutzer auf die falsche Antwort klickt, wird der Index rot angezeigt und der Index wird nicht angezeigt nächste Seite, bis der Benutzer die richtige Antwort gegeben hat ...
Ich habe eine GridView in Swiper festgelegt (Swiper wurde importiert, importiert 'package: flutter_swiper / flutter_swiper.dart';). und ich möchte den nächsten Index von Swiper anzeigen, nachdem ich eine Logik in GridView abgeschlossen habe. Angenommen, ich habe eine lange Zeichenfolgenliste (Array) und habe zufällig vier Wertzeichenfolgen aus dieser Liste (Array) genommen. Diese Zeichenfolge mit vier Werten wurde im GridView-Index festgelegt.
Wieder mache ich eine neue Zeichenkettenliste (Array) mit dieser vierwertigen Zeichenkette und habe zufällig einen Wert aus dieser neuen Zeichenkettenliste (Array) genommen, diese einzelne Zeichenkette in Swiper. Wenn der Benutzer den Swiper-Indexwert für den GridView-Indexwert 4 korrekt auswählen kann, wird der nächste Bildschirm in Swiper angezeigt. Die Ausgabe funktioniert jedoch nicht ordnungsgemäß. Das Problem ist - zuerst setze ich die weiße Farbe im GridView-Index, wenn es richtig ist, sollte die Antwort die grüne Farbe im GridView-Index und die falsche rote Farbe im GridView-Index sein. Hier ist meine Logik, die es chaotisch gemacht hat.
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,
),
),
),
),
),
],
),
),
);
}
);
}
}
Antworten
Als erstes sollten Sie Ihre onTap-Funktion in Ihrem Gesten-Detektor in einen einfacheren Code umwandeln. Sie sollten nicht jede einzelne Zahl für den Index überprüfen, da der Index bereits diese Zahl ist
Um klarer zu sein, wenn Sie list [index] aufrufen, ist der Index hier eine Ganzzahl. Wenn also der Index == 1 ist, rufen Sie list [1] auf, und wenn der Index == 5 Sie aufruft, listet Sie list [5] auf. Ich muss nicht testen, ob Index == 1 oder so ähnlich ist
Ihr Code sollte also ungefähr so sein
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((){});
}
},
Und als nächstes das Problem, zu testen, ob die Antwort richtig ist oder nicht, und die Farbe zu ändern und zum nächsten Bildschirm zu wechseln
Als erstes verschieben Sie diese Zeilen in Ihrer Item Builder-Funktion in eine Funktion, die Sie beispielsweise von einem beliebigen Ort aus aufrufen können
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();
}
und Sie können diese Frage nach dem Aufrufen Ihres dialogAlert aufrufen, wenn Sie die Zeile ändern, wenn Sie _showCorrectAndIncorrectDialog (...) in aufrufen
_showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green);
newQuestion() //**Add this line also**
Anmerkungen :
- Denken Sie daran, die Variablen zu deklarieren, die Sie in Ihrer Klasse benötigen, damit sie in der Funktion newQuestion geändert werden
- Wenn Sie die App zum ersten Mal zu Mittag essen, werden die Variablen wie "oneValueRandomGet" null, sodass Sie keine Daten anzeigen können. Rufen Sie oneQuestion () in Ihrem initState auf, damit Sie beim Starten der App Ihre erste Frage direkt fertig stellen.
Ich hoffe, das alles verwirrt Sie nicht. Ich habe mein Bestes getan, um Sie zu vereinfachen und Ihnen die einfachste Bearbeitung und Antwort zu geben. Wenn Sie Ihr Problem immer noch nicht beheben können, würde ich Ihnen wirklich raten, zu versuchen, Ihren Code neu zu schreiben und es zu versuchen mach es so einfach wie möglich.
Vielen Dank.