如何设置Flutter中默认选中的单选按钮?

时间:2019-02-19 20:06:40

标签: flutter radio-button flutter-layout

默认情况下,Flutter会将所有单选按钮显示为空(未选中)。

如何设置默认选中的单选按钮?

我正在发布此问题来记录我的解决方案,这可能会对某些人有所帮助,并且还会启动一个与此相关的主题,因为我在这里没有找到任何关于它的信息。

单选按钮代码下方:

class _ProductTypeScreen extends State<ProductType> {

  String _radioValue; //Initial definition of radio button value
  String choice;

  void radioButtonChanges(String value) {
    setState(() {
      _radioValue = value;
      switch (value) {
        case 'one':
          choice = value;
          break;
        case 'two':
          choice = value;
          break;
        case 'three':
          choice = value;
          break;
        default:
          choice = null;
      }
      debugPrint(choice); //Debug the choice in console
    });
  }

  // Now in the BuildContext... body widget:

  @override
  Widget build(BuildContext context) {
  //First of the three radio buttons

  Row(
    children: <Widget>[
      Radio(
        value: 'one',
        groupValue: _radioValue,
        onChanged: radioButtonChanges,
      ),
      Text(
        "One selected",
      ),
    ],
  ),

3 个答案:

答案 0 :(得分:2)

我举一个简单的例子来理解:

int _radioSelected = 1; 字符串_radioVal;

     child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Male'),
                  Radio(
                    value: 1,
                    groupValue: _radioSelected,
                    activeColor: Colors.blue,
                    onChanged: (value) {
                      setState(() {
                        **_radioSelected = value;
                        _radioVal = 'male';**
                      });
                    },
                  ),
                  Text('Female'),
                  Radio(
                    value: 2,
                    groupValue: _radioSelected,
                    activeColor: Colors.pink,
                    onChanged: (value) {
                      setState(() {
                        **_radioSelected = value;
                        _radioVal = 'female';**
                      });
                    },
                  )
                ],
              ),

答案 1 :(得分:1)

添加初始状态

class _ProductTypeScreen extends State<ProductType> {

  String _radioValue; //Initial definition of radio button value
  String choice;

  // ------ [add the next block] ------ 
  @override
  void initState() {
    setState(() {
      _radioValue = "one";
    });
    super.initState();
  }
  // ------ end: [add the next block] ------  

  void radioButtonChanges(String value) {
    setState(() {
      _radioValue = value;
      switch (value) {
        case 'one':
          choice = value;
          break;
        case 'two':
          choice = value;
          break;
        case 'three':
          choice = value;
          break;
        default:
          choice = null;
      }
      debugPrint(choice); //Debug the choice in console
    });
  }

  @override
  Widget build(BuildContext context) {

答案 2 :(得分:0)

解决方案:

要在Flutter中设置默认单选按钮,只需为单选按钮组值中使用的变量手动定义一个现有值。

  String _radioValue = 'one'; //one| two | three - One by default

要将所有单选按钮保持为空,只需将var设置为空:

 String _radioValue = null; //all radio buttons blank

或最简单的方法:

 String _radioValue; //all radio buttons blank