Question

我有一个字符串列表：

列表_choice = [“欧洲”，“亚洲”，“非洲”];

对于每个值，我都会生成RaisedButton：

我还有另一个变量：

字符串答案=“欧洲”;

我的目标：如果用户单击任何“凸起”按钮，则将“文本值”等于“答案”值的颜色更改为绿色。对于其他“文本”值不等于“答案”的值，请将颜色更改为红色。

我的代码存在问题，所有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()
       )
     )
   );
  }
}

如何更改独特的RaisedButton的颜色？

1 个答案: