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之外使用一个变量，当您对其进行更改时，它将与组中的所有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),
      ),
    );
  }
}

在您的主目录中创建类似的功能：

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

在您的主目录中，您将必须有一个变量_groupValue，并且地图将如下所示：

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

如何使我的单选按钮成为其中之一

1 个答案: