Question

我正在使用Flutter开发问题解答应用程序。如果此人单击跳过按钮，则应使该问题编号按钮变为红色。我该怎么做？

小部件：

@override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        backgroundColor: Colors.blue,
        body: SingleChildScrollView(
          scrollDirection: Axis.vertical,
          child: SizedBox(
            height: 600,
            child: Column(
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Container(
                width: 40,
                padding: EdgeInsets.all(5),
                child: RaisedButton(onPressed: () {
                  i = -1;
                  ChooseQuestion();
                },
                  color: Colors.deepOrange,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                          Radius.circular(10.0))),
                  child: Text("1",
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 20
                    ),
                  ),
                ),
              ),
              Container(
                width: 40,
                padding: EdgeInsets.all(5),
                child: RaisedButton(onPressed: () {
                  i = 0;
                  ChooseQuestion();
                },
                  color: Colors.deepOrange,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                          Radius.circular(10.0))),
                  child: Text('2',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 20
                    ),
                  ),
                ),
              ),
              Container(
                width: 40,
                padding: EdgeInsets.all(5),
                child: RaisedButton(onPressed: () {
                  i = 1;
                  ChooseQuestion();
                },
                  color: Colors.deepOrange,
                  textColor: Colors.white,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.all(
                          Radius.circular(10.0))),
                  child: Text('3',
                    textAlign: TextAlign.center,
                    style: TextStyle(
                        fontSize: 20
                    ),
                  ),
                ),
              ),
            ],
          );
                ),
                Expanded(
                    flex: 3,
                    child: Center(
                      child: Container(
                        width: 400,
                        height: 400,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Container(
                              width: 250,
                              child: Material(
                                elevation: 5,
                                color: Colors.deepOrange,
                                borderRadius: BorderRadius.all(
                                    Radius.circular(10.0)),
                                child: TextField(
                                  enabled: false,
                                  maxLines: 6,
                                  decoration: InputDecoration(
                                      fillColor: Colors.white,
                                      filled: true,
                                      hintText: questions[i]
                                  ),
                                  style: TextStyle(
                                      fontSize: 20,
                                      color: Colors.black
                                  ),
                                ),
                              ),
                            )
                          ],
                        ),
                      ),
                    )
                ),
                Expanded(
                    flex: 3,
                    child: Center(
                        child: Container(
                            width: 400,
                            height: 400,
                            child: Column(
                                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                children: <Widget>[
                                  Container(
                                    width: 250,
                                    child: Material(
                                      elevation: 2,
                                      color: Colors.deepOrange,
                                      borderRadius: BorderRadius.all(
                                          Radius.circular(10.0)),
                                      child: TextField(
                                        controller: answercontroller,
                                        maxLines: 3,
                                        //enabled: false,
                                        decoration: InputDecoration(
                                            fillColor: Colors.white,
                                            filled: true,
                                            hintText: 'Answer'
                                        ),
                                        style: TextStyle(
                                            fontSize: 20,
                                            color: Colors.black
                                        ),
                                      ),
                                    ),
                                  ),
                                ]
                            )
                        )
                    )
                ),
                Expanded(
                    flex: 1,
                    child: Align(
                      alignment: Alignment.topCenter,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                        children: <Widget>[
                          RaisedButton(onPressed: SkipQuestion,
                            color: Colors.deepOrange,
                            textColor: Colors.white,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                    Radius.circular(10.0))),
                            child: Text('Skip',
                              style: TextStyle(
                                  fontSize: 20
                              ),
                            ),
                          ),
                          RaisedButton(onPressed: NextQuestion,
                            color: Colors.deepOrange,
                            textColor: Colors.white,
                            shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.all(
                                    Radius.circular(10.0))),
                            child: Text('Next',
                              style: TextStyle(
                                  fontSize: 20
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                )
              ],
            ),
          ),
        ),
      );
  }

SkipQuestion，我要尝试更改特定按钮颜色的函数：

void SkipQuestion() {
    setState(() {
      if(i < (questions.length - 1)){
        // ignore: unnecessary_statements
        btncolor[(i+1).toString()] == Colors.red;
        i++;
      }
      else{
        Navigator.of(context).pushReplacement(MaterialPageRoute(
          builder: (context) => resultpage(),
        ));
      }
    });
  }

btncolor是将有状态小部件定义为全局变量：

class _quizpageState extends State<quizpage> with SingleTickerProviderStateMixin {

  int i = 0;

  Map<String, Color> btncolor = {
    "1" : Colors.deepOrangeAccent,
    "2" : Colors.deepOrangeAccent,
    "3" : Colors.deepOrangeAccent,
    "4" : Colors.deepOrangeAccent,
    "5" : Colors.deepOrangeAccent,
    "6" : Colors.deepOrangeAccent,
    "7" : Colors.deepOrangeAccent,
    "8" : Colors.deepOrangeAccent,
    "9" : Colors.deepOrangeAccent,
  };

  //The widget code is here which is displayed in the first code

}

Answer 1

重建小部件时，必须使用按钮上的 btnColor 来应用颜色更改。在您当前的代码中，我看到您正在手动将颜色设置为Colors.deepOrange。

存在：

RaisedButton(onPressed: SkipQuestion,
                        color: Colors.deepOrange,
                        textColor: Colors.white,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(10.0))),
                        child: Text('Skip',
                          style: TextStyle(
                              fontSize: 20
                          ),
                        ),
                      ),

将其更改为：

RaisedButton(onPressed: SkipQuestion,
                          //colorVariable you want to change the color when you rebuild the widget
                        color: btncolor[index_here],
                        textColor: Colors.white,
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.all(
                                Radius.circular(10.0))),
                        child: Text('Skip',
                          style: TextStyle(
                              fontSize: 20
                          ),
                        ),
                      ),

从颤动中的多个按钮更改一个按钮的颜色

1 个答案: