Question

我只想拥有普通的单选按钮，在该单选按钮中只能选择组中的一个按钮。根据在线教程，我们需要在onChanged的setState方法中将groupvalue变量设置为值。如果我这样做，我可以选择所有按钮，而我不希望这种情况发生。我希望一次只选择一个按钮（从该组中）。如果我的代码有任何问题或其他处理方法，请告诉我。

option是标题的字符串参数optionvalue是该选项的值。

class Option extends StatefulWidget {
  final String option;
  final int optionvalue;

  Option(this.option, this.optionvalue);

  _OptionState createState() => _OptionState();
}

class _OptionState extends State<Option> {
  int groupvalue;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Container(
        child: RadioListTile(
          title: Text(
            widget.option,
            style: TextStyle(fontSize: 20.0),
          ),
          activeColor: Colors.black,
          value: widget.optionvalue,
          groupValue: groupvalue,
          onChanged: (int a) {
            print(a);
            setState(() {
              groupvalue = a;
            });
          },
        ),
      ),
    );
  }
}

Answer 1

尝试此代码

int _groupValue = -1;

@override
Widget build(BuildContext context) {
  return Column(
    children: <Widget>[
      _myRadioButton(
        title: "Checkbox 0",
        value: 0,
        onChanged: (newValue) => setState(() => _groupValue = newValue),
      ),
      _myRadioButton(
        title: "Checkbox 1",
        value: 1,
        onChanged: (newValue) => setState(() => _groupValue = newValue),
      ),
    ],
  );
}

Widget _myRadioButton({String title, int value, Function onChanged}) {
  return RadioListTile(
    value: value,
    groupValue: _groupValue,
    onChanged: onChanged,
    title: Text(title),
  );
}

输出：

Answer 2

对于水平单选按钮列表，请尝试以下操作：

int _groupValue = -1;

Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                Text('Gender', style: TextStyle(fontSize: 18)),
                Container(
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Expanded(
                            flex: 1,
                            child: RadioListTile(
                              value: 0,
                              groupValue: _groupValue,
                              title: Text("Male"),
                              onChanged: (newValue) =>
                                  setState(() => _groupValue = newValue),
                              activeColor: Colors.red,
                              selected: false,
                            ),
                          ),
                          Expanded(
                            flex: 1,
                            child: RadioListTile(
                              value: 1,
                              groupValue: _groupValue,
                              title: Text("Female"),
                              onChanged: (newValue) =>
                                  setState(() => _groupValue = newValue),
                              activeColor: Colors.red,
                              selected: false,
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),

单选按钮有问题

2 个答案: