flutter - 一次突出显示两个单选按钮

Question

我正在尝试构建一个颤振的应用程序，在测验期间，我使用单选按钮。如果用户未选择正确答案，我想突出显示正确答案和用户选择的答案。

如果选择了正确的答案，那么我只想选择用户选择的答案。

我找不到任何方法来做到这一点。

child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              widget.content.getQuestion(),
              style: Constants.articleQuestionStyle,
            ),
            Container(),
            Column(
                children: widget.content
                    .getOptions()
                    .map<Widget>((value)  => _buildRadioBtn(value))
                    .toList()),

//
//                {
//                  return Row(children: [
//                    Radio(
//                      value: value,
//                      groupValue: widget.content.getGuess(),
//                      onChanged: (val){
//                        print("value:  ${value}");
//                        print("isChecked:  ${widget.content.isChecked()}");
//                        return //_buildRadioBtn(val);
////                                widget.content.isChecked()
////                                  ? null :
//                          _buildRadioBtn(val);//_handleValueChanged(val);
//                      },
//                      activeColor: (widget.content.getGuess() == widget.content.getCorrectAnswer())? Colors.orange: Colors.red,
//                    ),
//
//                    Text(
//                      value,
//                      style: Constants.articleBodyTextStyle,
//                    )
//                  ]);
//                }
//                ).toList()),

和

  _buildRadioBtn(value) {
//    bool isCorrect = widget.content.getCorrectAnswer().contains(value);
//    bool isChosen = widget.content.getGuess().contains(value);
    return Row(
      children: <Widget>[
        Radio(
          value: widget.content.isChecked(),
          groupValue: widget.content.getGuess(),
          onChanged: (value){
            if(!widget.content.isChecked()) {
//              print("ffffff");
//              widget.content.registerGuess(value);
//              print("abc");
//              setState(() {});
            _handleValueChanged(value);
            }
          },
          activeColor: (
              widget.content.getGuess() == widget.content.getCorrectAnswer())? Colors.orange: Colors.red,
        ),

        Text(
//          "hello",
          value,
          style: Constants.articleBodyTextStyle,
        )
      ],
    );
  }
}

我认为它的工作方式是在用户选择答案后重建单选按钮，但我不能这样做。请帮忙。

标签： flutterflutter-layout

Answer 1

方法：1

String question = 'Q 1', answer = 'A 3', defaultValue = 'nil';
      List<String> options = ['A 1', 'A 2', 'A 3', 'A 4'], info = ['', '', '', ''];
      List<Color> bgs = [Colors.white, Colors.white, Colors.white, Colors.white];

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                ListTile(title: Text(question)),
                ListView.builder(
                    shrinkWrap: true,
                    itemCount: options.length,
                    itemBuilder: (cc, ii) {
                      return Card(
                        color: bgs[ii],
                        child: ListTile(
                          title: Text(options[ii]),
                          subtitle: Text(info[ii]),
                          leading: Radio(
                            value: options[ii],
                            groupValue: defaultValue,
                            onChanged: (String value) {
                              setState(() {
                                defaultValue = value;
                              });
                            },
                          ),
                        ),
                      );
                    }),
                RaisedButton(
                    onPressed: () {
                      if (defaultValue == answer) {
                        setState(() {
                          int ind = options.indexOf(defaultValue);
                          bgs[ind] = Colors.green;
                          info[ind] = 'Correct Answer !';
                        });
                      } else {
                        setState(() {
                          int wrongInd = options.indexOf(defaultValue);
                          bgs[wrongInd] = Colors.redAccent;
                          info[wrongInd] = 'Wrong Answer !';
                          int correctInd = options.indexOf(answer);
                          bgs[correctInd] = Colors.green;
                          info[correctInd] = 'Correct Answer !';
                        });
                      }
                    },
                    child: Text('Submit'))
              ],
            ),
          ),
        );
      }

方法：2

String question = 'Q 1', answer = 'A 3', defaultValue = 'nil';
  List<String> options = ['A 1', 'A 2', 'A 3', 'A 4'], info = ['', '', '', ''],radioValues=[];
  List<Color> bgs = [Colors.black, Colors.black, Colors.black, Colors.black];

  @override
  void initState(){
    super.initState();
    radioValues.addAll(options);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            ListTile(title: Text(question)),
            ListView.builder(
                shrinkWrap: true,
                itemCount: options.length,
                itemBuilder: (cc, ii) {
                  return ListTile(
                    title: Text(options[ii],
                               style:TextStyle(color:bgs[ii])),
                    subtitle: Text(info[ii],
                                  style:TextStyle(color:bgs[ii])),
                    leading: Radio(
                      value: radioValues[ii],
                      groupValue: defaultValue,
                      onChanged: (String value) {
                        setState(() {
                          defaultValue = value;
                        });
                      },
                    ),
                  );
                }),
            RaisedButton(
                onPressed: () {
                  if (defaultValue == answer) {
                    setState(() {
                      int ind = options.indexOf(defaultValue);
                      bgs[ind] = Colors.green;
                      info[ind] = 'Correct Answer !';
                    });
                  } else {
                    setState(() {
                      int wrongInd = options.indexOf(defaultValue);
                      bgs[wrongInd] = Colors.redAccent;
                      info[wrongInd] = 'Wrong Answer !';
                      int correctInd = options.indexOf(answer);
                      bgs[correctInd] = Colors.green;
                      info[correctInd] = 'Correct Answer !';
                      radioValues[wrongInd] = defaultValue;
                      radioValues[correctInd] = defaultValue;
                    });
                  }
                },
                child: Text('Submit'))
          ],
        ),
      ),
    );
  }