Flutter-使用计时器将gridView()中元素的颜色更改为一个序列

Question

我正在我的应用程序中创建一个迷你游戏，它应该由3x3个按钮组成的网格，这些按钮将逐个随机闪烁，用户必须重新创建它。我设法用GridView()创建了按钮并设置了计时器，但现在我正在努力更改GridView()内按钮的颜色属性。这让我思考，如果我正确使用GridView()。

我想通过Timer以随机顺序多次更改按钮的颜色，然后用户应该重新创建它。我可以用定时器和GridView()来完成吗？或者有更简单的方法吗？(我的迷你游戏应该类似于《我们之中的反应堆》任务(

import 'dart:async';
import 'package:flutter/material.dart';
class Challenge extends StatefulWidget {
@override
_ChallengeState createState() => _ChallengeState();
}
class _ChallengeState extends State<Challenge> {
Timer timer;
Map userData = {};
int indexSaved;

@override
void initState() {
super.initState();
timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
print('hey');
});
}
@override
void dispose() {
super.dispose();
timer.cancel();
}

@override
Widget build(BuildContext context) {
userData = ModalRoute.of(context).settings.arguments;
print(userData);
return Scaffold(
body: SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: GridView.count(
crossAxisCount: 3,
// mainAxisSpacing: 20.0,
shrinkWrap: true,
children: List.generate(9, (index) {
return Center(
child: MaterialButton(
color: Colors.blueGrey[300],
padding: EdgeInsets.all(50.0),
splashColor: Colors.white,
onPressed: () {
indexSaved = index;
print(indexSaved);
},
),
);
}),
),
),
),
),
);
}
}

编辑日期：2020年10月21日：我创建了一个应该生成序列的小函数，并在计时器内启动它们。我对得到的答案进行了处理，并试图重做它们，以便在用例中使用它们。

我要更改的颜色：

color: indexWithColor == index
? Colors.indigo
: Colors.blueGrey[300],

这非常有效。

(摘录经过编辑(

List<int> correctValues = [];
int indexWithColor;
int indexDisplayed = 0;
void generateNewLevel() {
final random = new Random(seed);
correctValues.add(random.nextInt(9));
timer = new Timer.periodic(new Duration(milliseconds: 500), (Timer timer) {
setState(() {
indexWithColor = correctValues[indexDisplayed];
// print('Index color ' + indexWithColor.toString());
indexDisplayed++;
if (indexDisplayed == correctValues.length) {
new Timer(new Duration(milliseconds: 500), () {
setState(() {
indexWithColor = null;
indexDisplayed = 0;
});
timer.cancel();
});
timer.cancel();
}
});
});
}

现在我正在使用一个按钮来生成一个新的级别(稍后我会在解决这个问题时更改它(。它有效，但我有问题。

1. 用户无法区分按钮是否被按下两次(现在它的颜色被按下了一段时间(

2.按钮启动时似乎有点延迟。它不是精确的500毫秒，睡眠真的很乱
3.第一个级别(具有一个长序列(不可见，因为计时器一取消就会更改。

有更好的选择吗？

编辑：2020年10月21日下午12:00

我用编辑计时器解决了第二个和第三个问题，所以现在它有点工作，但没有更好的方法吗？检查已编辑的代码段。-^

Answer 1

如果您只想随机更改按钮的颜色，这是一种方法：(编辑：确保同一索引不会连续选择两次(

final rng = Random();
int indexWithColor;
@override
void initState() {
super.initState();
timer = new Timer.periodic(new Duration(seconds: 2), (Timer timer) {
setState(() {
int tempIndex;
do {
tempIndex = rng.nextInt(9);
} while (tempIndex == indexWithColor);
indexWithColor = tempIndex;
});
});
}

以及在您的MaterialButton中：

color: indexWithColor == index
? Colors.red
: Colors.blueGrey[300],

Answer 2

是的，你可以用定时器来完成。但是您需要使用一个布尔字段isIndexSaved来扩展您的列表。

class NewModel {
int index;
bool isIndexSaved;
}

然后，您需要使用newModel生成一个新列表，并在onPressed((时将isIndexSaved设置为true。材料按钮的颜色应该看起来像：

color: newModel.isIndexSaved 
? Colors.red[300], // desired color
: Colors.blueGrey[300],