同时突出显示两个单选按钮

时间:2019-12-30 00:05:05

标签: flutter flutter-layout

我正在尝试快速开发应用程序,其中在测验中我正在使用单选按钮。如果用户未选择正确答案,我想突出显示正确答案和用户选择的答案。

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

我找不到任何方法。

2 个答案:

答案 0 :(得分: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'))
          ],
        ),
      ),
    );
  }

Output

答案 1 :(得分:0)

我建议您保留用户选择的选择状态。您可以做的是更改项目文本的颜色或样式,以反映用户选择的内容与正确的答案。