flutter - 如何让我的单选按钮只能选择其中一个

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 的位置。

您已经为每个 radio 创建了一个 selectedRadio。因此，在您的 onChanged 中，您只更改来自点击的 radio 的 selectedRadio。

将 AnswerChoice 之外的一个变量用于 groupValue，当您更改它时，它将与该组的所有 Radio 一起复制。

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;
        });
      } 

在你的 main 中你必须有一个变量 _groupValue 并且你的 map 将是这样的:

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