【问题标题】:Trouble with flutter radio button颤动单选按钮的问题
【发布时间】:2019-08-08 14:09:53
【问题描述】:

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

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

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

【问题讨论】:

    标签: dart flutter


    【解决方案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),
      );
    }
    

    输出:

    【讨论】:

    • 感谢您的代码,但我使用构造函数来实例化按钮(我有很多单选按钮)。我不能在构建方法中包含所有单选按钮。如果您可以更改我的代码,您会进行哪些更改(如果可能)。感谢您的回复。
    • @Suhas G 我更新了代码以满足您的需求,请查看这个。它有一个构建RadioListTile的函数
    • 感谢分享此代码:)
    【解决方案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,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
    

    【讨论】:

    • 最好以最简单的方式回答问题。水平列表和其他布局属性只会分散答案。
    猜你喜欢
    • 2020-08-05
    • 2011-08-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-12-30
    • 2021-12-28
    相关资源
    最近更新 更多