Flutter如何实现RadioGroup功能

在Flutter中，如何实现类似Android的RadioGroup功能？目前看到Radio组件只能单独使用，但需要实现一组互斥的单选按钮，并且能获取选中值。官方文档没有明确说明如何分组，尝试用StatefulWidget管理状态但比较繁琐。有没有更简洁的实现方式或现成的第三方库可以推荐？最好能附带简单的代码示例说明如何绑定值和监听变化。

2 回复

在Flutter中实现RadioGroup功能，可以通过Radio和RadioListTile结合StatefulWidget来实现。以下是简单示例：

  1. 定义选项和当前选中值：
String _selectedValue = '选项1';
List<String> options = ['选项1', '选项2', '选项3'];
  1. 使用Column或ListView构建单选组：
Column(
  children: options.map((value) {
    return RadioListTile<String>(
      title: Text(value),
      value: value,
      groupValue: _selectedValue,
      onChanged: (newValue) {
        setState(() {
          _selectedValue = newValue!;
        });
      },
    );
  }).toList(),
)

关键点：

  • 所有Radio的groupValue必须相同
  • onChanged回调中更新状态
  • 使用setState触发UI刷新

也可以使用第三方库如flutter_radio_group快速实现。这种方式比Android原生RadioGroup更灵活，可以自定义样式和布局。

更多关于Flutter如何实现RadioGroup功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中，可以通过 Radio 和 RadioListTile 组件结合状态管理来实现 RadioGroup 功能。以下是具体实现方法：

1. 使用 Radio + StatefulWidget

class MyRadioGroup extends StatefulWidget {
  @override
  _MyRadioGroupState createState() => _MyRadioGroupState();
}

class _MyRadioGroupState extends State<MyRadioGroup> {
  int _selectedValue = 1;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        RadioListTile<int>(
          title: Text('选项1'),
          value: 1,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value!;
            });
          },
        ),
        RadioListTile<int>(
          title: Text('选项2'),
          value: 2,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value!;
            });
          },
        ),
        RadioListTile<int>(
          title: Text('选项3'),
          value: 3,
          groupValue: _selectedValue,
          onChanged: (value) {
            setState(() {
              _selectedValue = value!;
            });
          },
        ),
      ],
    );
  }
}

2. 使用第三方包

也可以使用 radio_group 等第三方包简化实现：

dependencies:
  radio_group: ^1.0.2

RadioGroup(
  labels: ["选项1", "选项2", "选项3"],
  onSelected: (value) => print(value),
)

关键点说明：

  • 使用相同的 groupValue 来关联单选组
  • 通过 onChanged 回调更新选中状态
  • RadioListTile 自带标签和布局，比 Radio 更方便
  • 使用泛型确保类型安全（如 <int>）

这种方式可以轻松创建具有统一外观和行为的单选组。

回到顶部