如何更改独特 RaisedButton 的颜色？

Question

我有一个字符串列表：

List _choice = ["Europe","Asia","Africa"];

对于我生成 RaisedButton 的每个值：

我还有一个变量：

字符串答案 = “欧洲”；

我的目标： 如果用户单击任何 Raisedbutton，则将 Text 值等于 answer 值的颜色更改为绿色。对于其他文本值不等于答案值的情况，将颜色更改为红色。

我的代码的问题是所有 RaisedButton 都变为红色或绿色。

 Widget build(BuildContext context) {
    List<String> _choice = <String>["Europe","Asia","Africa"];
    String answer = "Europe";
    int NumberChoice = _choice.length;

    //RaisedButtons
                        for (var i = 0; i < NumberChoice; i++)
                          new RaisedButton(
                            color: _colorButton,
                            child: new Text(
                              _choice[i],
                              style: new TextStyle(
                                  fontSize: 20.0, color: Colors.white),
                            ),
                            onPressed: () {
                              setState(() {
                                if (_choice[i] == answer) {
                                  print("--------------- Corect ----------------");
                                  _colorButton = Colors.greenAccent;
                                  scoreResult = 1;
                                } else {
                                  print("--------------- False ------------------------");
                                  _colorButton = Colors.redAccent;
                                  scoreResult = 0;
                                }
                              });
                            },
                          ),

Answer 1

我终于解决了你的案子。这需要付出很多努力，但最终，我们做到了。

我所做的是，我在按下按钮时重建了小部件并更改了 RaisedButton() 的颜色键本身的颜色

我知道这听起来有点复杂，但在研究了解决方案后，你会明白的。

在转向解决方案之前，这里是演示。按钮默认是粉红色的，只要我点击任何按钮，结果就会出现，错误答案=红色，正确=绿色

class RadioButtonPage extends StatefulWidget {
  @override
  RadioButtonPageState createState() => RadioButtonPageState();

}

class RadioButtonPageState extends State<RadioButtonPage> {

  List<String> _choice = ["Europe","Asia","Africa"];
  String answer = "Europe";
  var score;

  //this bool does the real magic since you want the result to be seen on the press of the button, so here you go, this keeps track of the pressed button whether it is pressed once or not
  bool isPressedOnce = false;

  List<Widget> getButtons(){
    List<Widget> _listWidget = [];
     for(int i=0; i< _choice.length; i++){
      _listWidget.add(
        RaisedButton(
           //Everytime it builds up, it will work according to this situation, hence works
          color: isPressedOnce ? (_choice[i] == answer ? Colors.greenAccent : Colors.red) : Colors.pink,
          child: Text(_choice[i]),
          onPressed: (){
            //Changes the state of bool to true, since any button is pressed
            setState(() {
              this.isPressedOnce = true;
              if(_choice[i] == this.answer) score = 1;
              else score = 0;
            });

            //Rebuilding the widget again, and now with the current condition I have put on that color key,  it will finally work as per the requirements
            this.getButtons();
          }
        )
      );
    }

    return _listWidget;
  }

  @override
  Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
        title: Text('Welcome'),
     ),
     body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: this.getButtons()
       )
     )
   );
  }
}