#flutter #dart #random #gridview #swiper
#флаттер #dart #Случайный #gridview #flutter-swiper
Вопрос:
Я пытаюсь создать игру в слова. Прежде всего, индекс будет белым. если пользователь нажмет на правильный ответ, тогда индекс будет зеленого цвета и перейдет к следующему экрану, также индекс будет белым на следующем экране.. опять же, если пользователь нажмет неправильный ответ, индекс будет красного цвета и не отпускайте переход на следующую страницу, пока пользователь не укажет правильный ответ…
я установил GridView в Swiper (Swiper взял путем импорта, импортируйте ‘package:flutter_swiper/flutter_swiper.dart’;). и я хочу показать следующий индекс Swiper после завершения логики в GridView. предположим, у меня есть длинный список строк (массив) и я произвольно взял четыре строки значений из этого списка (массива), эти четыре строки значений установлены в индексе GridView.
Снова я создаю новый список строк (массив) с помощью этой строки с четырьмя значениями и случайным образом извлекаю значение из этого нового списка строк (массива), это единственная строка, установленная в Swiper. наконец, если пользователь может правильно выбрать значение индекса Swiper для значения индекса GridView four, тогда пользователь сможет увидеть следующий экран в Swiper. но вывод не работает должным образом. проблема в том, что сначала я устанавливаю белый цвет в индексе GridView, если это правильный ответ, он должен быть зеленым цветом в индексе GridView, а неправильным будет красный цвет в индексе GridView. вот моя логика сделала это беспорядочным.
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,
),
),
),
),
),
],
),
),
);
}
);
}
}
Комментарии:
1. невозможно понять вашу логику, упростите свой код и добавьте комментарии. Также добавьте сведения о потоке этой страницы.
2. @ZainUrRehman я пытаюсь сделать игру в слова. если пользователь нажмет правильный ответ, тогда индекс станет зеленым и перейдет к следующему экрану, этот в порядке … опять же, если пользователь нажмет неправильно, тогда индекс будет красным, но проблема в том, что когда пользователь нажимает неправильно, он также переходит к следующему экрану…. здесь я просто хочу перейти к следующему экрану, когда пользователь нажмет правильный индекс.
Ответ №1:
итак, первое, что вам следует сделать, это изменить вашу функцию onTap в вашем детекторе жестов на более простой код. Вы не должны проверять каждое отдельное число для индекса, потому что индекс уже является этим числом
Чтобы было более понятно, когда вы вызываете list[index], индекс здесь является целым числом, поэтому, если index==1, вы вызываете list[1], а если index== 5, вы вызываете list[5], вам не нужно проверять, является ли index== 1 или что-то в этом роде
итак, ваш код должен быть примерно таким
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((){});
}
},
И далее для проблемы проверки правильности ответа или нет, изменения цвета и перехода к следующему экрану
Первым делом, пожалуйста, переместите эти строки в вашей функции построения элементов в функцию, которую вы можете вызывать из любого места, например, так
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();
}
и вы можете задать этот вопрос после вызова вашего диалогового окна, если вы измените строку при вызове _showCorrectAndIncorrectDialog(…) на
_showCorrectAndIncorrectDialog("Congratulation", "asset/icon_images/ok_emoji.png", "Correct answer", Colors.green);
newQuestion() //**Add this line also**
Примечания :
-Не забудьте объявить нужные вам переменные в вашем классе, чтобы они были изменены в функции newQuestion
-При первом запуске приложения переменные, такие как » oneValueRandomGet «, будут равны нулю, поэтому вы не сможете отобразить какие-либо данные, вызовите oneQuestion() в вашем initState, чтобы при запуске приложения вы сразу получили готовый первый вопрос.
Я надеюсь, что все это вас не смущает, я изо всех сил старался упростить и дать вам максимально простое редактирование и ответ, пожалуйста, если вы все еще не можете решить свою проблему, я бы очень посоветовал вам попытаться переписать свой код и попытаться сделать его как можно более простым.
Спасибо.
Комментарии:
1. отсутствует изображение вопроса, оно автоматически переходит к следующему экрану как в false, так и в true. кроме того, цвет возвращается к белому, цвет должен быть белым на следующем экране.
2. для цвета добавьте это в newQuestion() для (var i = 0; i < colorsList; i ) { colorsList[index]=Colors.white; } setState((){}); //В последней строке newQuestion()
3. извините, я не понимаю, могу ли я отправить вам проект? пожалуйста, дайте мне свой адрес электронной почты
4. Хорошо, вы можете отправить мне электронное письмо на oussama.5254@yahoo . fr Я постараюсь переписать ваш проект и помочь вам его исправить
5. я отправил тебе электронное письмо, брат