Flutter-使用计时器按顺序更改gridView中元素的颜色

如何解决Flutter-使用计时器按顺序更改gridView中元素的颜色

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

我想通过Timer以随机顺序多次更改按钮的颜色，然后用户应重新创建它。我可以使用计时器和GridView()来执行此操作吗？或者有更简单的方法吗？ （我的迷你游戏应该类似于Among us Reactor task）

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);
                    },),);
              }),);
  }
}

编辑21/10/2020： 我创建了一个应该生成序列的小函数，并在计时器内启动它们。我研究了获得的答案，然后尝试重做它们，以便可以在用例中使用它们。

我要更改的颜色：

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

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

解决方法

如果您只是想随机更改按钮的颜色，这是一种方法： （已编辑：确保同一索引没有连续两次被选中）

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],

,

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

class NewModel {
    int index;
    bool isIndexSaved;
}

然后，您需要使用newModel生成一个新列表，并在onPressed（）时将isIndexSaved设置为true。而且MaterialButton的颜色应类似于：

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