Flutter 在颤振中逐个更改多个按钮的颜色

单击Go按钮时，我希望按钮1变为红色。然后返回白色。然后按钮2应变为红色，然后恢复为白色。然后是3、4等等

我可以设计回调按钮，使按钮1变为红色。我不确定，如何在2秒钟后将其变回白色，然后将“下一步”按钮变为红色等等

主飞镖

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final String apptitle = 'Test';

  Widget _goButtonClickCallback() {
    print("hello world. go tapped");
    // How do I control animation inside numListBuilder() from here? 
  }

  @override
  Widget build(BuildContext context) {
    var numList = [
      "1",
      "2",
      "3",
      "4",
      "5",
      "6",
      "7",
      "8",
    ];

    return MaterialApp(
      title: apptitle,
      theme: ThemeData(
        primarySwatch: Colors.deepOrange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
          appBar: AppBar(
            title: Text(apptitle),
          ),
          body: Column(
            children: [
              NumberListBuilder(numList),
              SizedBox(height: 110),
              GoButton(_goButtonClickCallback)
            ],
          )),
    );
  }
}

类MyApp扩展StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
最终字符串apptitle='Test'；
Widget_goButtonClickCallback（）{
打印（“hello world.go tapped”）；
//如何从这里控制numListBuilder（）中的动画？
}
@凌驾
小部件构建（构建上下文）{
变量numList=[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
];
返回材料PP(
标题：apptitle，
主题：主题数据(
primarySwatch：颜色。深橙色，
视觉密度：视觉密度。自适应平台密度，
),
家：脚手架(
appBar:appBar(
标题：文本（apptitle），
),
正文：专栏(
儿童：[
NumberListBuilder（numList），
尺寸箱（高度：110），
GoButton（_goButtonClickCallback）
],
)),
);
}
}

数字编译程序

import 'package:flutter/material.dart';

class NumberListBuilder extends StatefulWidget {
  final List<String> numberList;
  const NumberListBuilder(this.numberList);

  @override
  _NumberListBuilderState createState() => _NumberListBuilderState();
}

class _NumberListBuilderState extends State<NumberListBuilder> {
  List<TableRow> getButtonRows() {
    // list for all rows
    List<TableRow> rows = [];
    int numCols = 2;
    int numberListLength = widget.numberList.length;
    int numRows = 4

    var k = 0;
    for (var i = 0; i < numRows; i++) {
      List<Widget> rowChildren = [];
      for (var j = 0; j < numCols; j++) {
        rowChildren.add(Container(
            height: 80.0,
            child: FlatButton(
              color: Colors.white70,
              onPressed: () {},
              child: Text(
                widget.numberList[k++],
                style: TextStyle(
                  fontSize: 20.0,
                ),
              ),
            )));
      }
      rows.add(new TableRow(children: rowChildren));
    }
    return rows;
  }

  @override
  Widget build(BuildContext context) {
    return new Container(
      child: new Table(
        border: TableBorder.all(),
        children: getButtonRows(),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类NumberListBuilder扩展StatefulWidget{
最终列表编号列表；
常量NumberListBuilder（this.numberList）；
@凌驾
_NumberListBuilderState createState（）=>\u NumberListBuilderState（）；
}
类_NumberListBuilderState扩展状态{
列表getButtonRows（）{
//所有行的列表
列表行=[]；
int numCols=2；
int numberListLength=widget.numberList.length；
int numRows=4
var k=0；
对于（变量i=0；i

您好，亲爱的，点击go按钮时，您需要先调用计时器在计时器之前设置每个按钮的颜色您将颜色设置为红色，内部计时器将颜色设置为白色尝试使用1个按钮，然后以类似的方式继续其他按钮谢谢我希望这会有所帮助

 Timer(Duration(seconds: 2),(){
   //set the color 
 });

---

为了简单地解释这一点，您需要每2秒重新绘制整个网格，在该构建方法中，设置一个条件，即哪个框将绘制为红色，哪个框将绘制为白色

问题是，您有另一个类在绘制方框，但您希望控制它如何从主类绘制方框。这是可以做到的，但很麻烦，最好把它们放在同一个类中。我为你做了这件事

免责声明：有更好更有效的方法来做这件事，但这应该让你开始，因为我改变了尽可能少

我改变的事情：

一级盒形图添加条件

color:k==numberToHighlight-1？Colors.red:Colors.white70，

这只是检查框是否应高亮显示为红色，否则为白色

将框的整个构建移动到main类中，以便可以轻松修改状态。我基本上只是创建了一个与构建Box的类同名的方法

添加状态

int numberToHighlight=0

添加了一个方法，该方法在延迟一段时间后调用自身，直到其将所有框着色，然后停止调用自身并将值重置为0

将GoButton更改为FlatButton（因为您尚未共享该代码），这不是问题

以下是完整的代码（对您的代码进行最小更改）：

类MyApp扩展StatefulWidget{
@凌驾
_MyAppState createState（）=>\u MyAppState（）；
}
类MyAppState扩展了状态{
最终字符串apptitle='Test'；
int numberToHighlight=0；
变量numList=[
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
];
void _goButtonClickCallback（）{
打印（“helloworld.go设置${numberToHighlight}”）；
if（numberToHighlightclass MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

      final String apptitle = 'Test';
    
      int numberToHighlight = 0;
    
      var numList = [
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
        ];
    
      void _goButtonClickCallback() {
        print("hello world. go tapped setting ${numberToHighlight}");
            
        if(numberToHighlight < numList.length)
        {
          setState(() {
            numberToHighlight++;
          });
          Future.delayed(const Duration(seconds: 2), _goButtonClickCallback);
        }
        else
        {
          setState(() {
            numberToHighlight = 0;
          });
        }
      }
    
      @override
      Widget build(BuildContext context) {
    
        List<TableRow> getButtonRows() {
          // list for all rows
          List<TableRow> rows = [];
          int numCols = 2;
          int numberListLength = numList.length;
          int numRows = 4;
    
          var k = 0;
          for (var i = 0; i < numRows; i++) {
            List<Widget> rowChildren = [];
            for (var j = 0; j < numCols; j++) {
              rowChildren.add(Container(
                  height: 80.0,
                  child: FlatButton(
                    color: k == numberToHighlight-1 ? Colors.red : Colors.white70,
                    onPressed: () {},
                    child: Text(
                      numList[k++],
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  )));
            }
            rows.add(new TableRow(children: rowChildren));
          }
          return rows;
        }
    
        Widget numberListbuilder()
        {
          return new Container(
          child: new Table(
            border: TableBorder.all(),
            children: getButtonRows(),
          ),
        );
        }
    
        return MaterialApp(
          title: apptitle,
          theme: ThemeData(
            primarySwatch: Colors.deepOrange,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: Scaffold(
              appBar: AppBar(
                title: Text(apptitle),
              ),
              body: Column(
                children: [
                  numberListbuilder(),
                  SizedBox(height: 110),
                  FlatButton(
                    onPressed: _goButtonClickCallback,
                    child: Text("GO!"),
                    color: Colors.blue,
                  )
                ],
              )),
        );
    }
}