如何使我的单选按钮只能选择其中一个

Question

我希望一次只选择一个单选按钮（从该组中）。但是我的所有单选按钮都可以选择。我应该怎么做才能解决这个问题？

这是我的主要代码

    body: Column(
      children: <Widget>[
        Expanded(
          child: ListView.builder(
              itemCount: quizData.length,
              padding: EdgeInsets.all(8.0),
              itemBuilder: (context, index) {
                Results results = quizData[index];
                List<String> allAnswer = results.incorrectAnswer;
                allAnswer.add(results.correctAnswer);

                return ListTile(
                    title: Text("${index + 1}. " + results.question,
                        style: TextStyle(
                          fontSize: 15.0,
                        )),
                    subtitle: Container(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: allAnswer.map((choice) {
                          return AnswerChoice(
                              allAnswer,
                              allAnswer.indexOf(choice),
                              choice,
                              allAnswer.indexOf(choice));
                        }).toList(),
                      ),
                    ));
              }),
        ),
      ],
    ));

这是创建单选按钮的代码

class AnswerChoice extends StatefulWidget {
  final List<String> results;
  final int index;
  final String choice;
  final int abjadIndex;
  AnswerChoice(this.results, this.index, this.choice, this.abjadIndex);

  @override
  _AnswerChoiceState createState() =>  _AnswerChoiceState(this.choice, this.abjadIndex);
}

class _AnswerChoiceState extends State<AnswerChoice> {
  int selectedRadio = -1;
  final int abjadIndex;
  List abjadList = ['a', 'b', 'c', 'd'];
  Color colorPressed() {
    return Colors.green;
  }

  final String choice;
  _AnswerChoiceState(this.choice, this.abjadIndex);
  @override
  Widget build(BuildContext context) {
    return RadioListTile(
      value: widget.index,
      groupValue: selectedRadio,
      onChanged: (val) {
        setState(() {
          selectedRadio = val;
          print("jawaban: " + choice);
          print(widget.index);
          print(selectedRadio);
        });
      },
      title: Text(
        "${abjadList[abjadIndex]}. " + choice,
        style: TextStyle(fontSize: 14.0),
      ),
    );
  }
}

我在Trouble with flutter radio button这个问题上尝试过类似的问题，但没有任何改变

Answer 1

您的问题是变量selectedRadio 的位置。

您为每台收音机创建了一个selectedRadio。因此，在您的onChanged 中，您只需从点击的收音机中更改selectedRadio。

在AnswerChoice 到groupValue 之外使用一个变量，当您更改它时，它将被复制到该组的所有无线电。

import 'package:flutter/material.dart';
import 'dart:ui';

class AnswerChoice extends StatefulWidget {
  //final List<String> results; Unused
  final int index;
  final String choice;
  final int groupValue;
  final ValueChanged<int> onChanged;


  //final int abjadIndex; equal Index
  AnswerChoice(this.index, this.choice, this.groupValue, this.onChanged);

  @override
  _AnswerChoiceState createState() =>  _AnswerChoiceState(this.index, this.choice, this.groupValue);
}

class _AnswerChoiceState extends State<AnswerChoice> {
  int selectedRadio = -1;
  final int index;
  final int groupValue;
  List abjadList = ['a', 'b', 'c', 'd'];
  Color colorPressed() {
    return Colors.green;
  }

  final String choice;
  _AnswerChoiceState(this.index, this.choice, this.groupValue);
  @override
  Widget build(BuildContext context) {
    return RadioListTile(
      value: widget.index,
      groupValue: groupValue,
      onChanged: widget.onChanged,
      title: Text(
        "${abjadList[index]}. " + choice,
        style: TextStyle(fontSize: 14.0),
      ),
    );
  }
}

在你的 main 中创建一个类似的函数：

     void changeOption(int val) {
        setState(() {
          _groupValue = val;
        });
      } 

在您的主目录中，您必须有一个变量 _groupValue，您的地图将类似于：

    allAnswer.map((choice) {
      return AnswerChoice(
      allAnswer.indexOf(choice),
      choice,
      _groupValue,
      changeOption);
    }).toList()