Flutter 输入组件 Radio 详解

1. 引言

在 Flutter 中，Radio 是用于单选的按钮组件，适用于需要用户在多个选项中选择一个的场景，如表单、设置选项等。Radio 通过 value 和 groupValue 进行状态管理，并结合 onChanged 监听选中状态的变化。本文将介绍 Radio 的基本用法、主要属性及自定义样式。

2. Radio 的基本用法

Radio 组件的 value 用于标识单选按钮的选项值，groupValue 确定当前选中的值。

Dart 复制代码

int selectedValue = 1;

Row(
  children: [
    Radio<int>(
      value: 1,
      groupValue: selectedValue,
      onChanged: (int? value) {
        setState(() {
          selectedValue = value!;
        });
      },
    ),
    Radio<int>(
      value: 2,
      groupValue: selectedValue,
      onChanged: (int? value) {
        setState(() {
          selectedValue = value!;
        });
      },
    ),
  ],
)

3. 主要属性

属性	说明
`value`	选项的值
`groupValue`	当前选中的值
`onChanged`	选项变化时的回调函数
`activeColor`	选中时的颜色
`fillColor`	填充颜色
`materialTapTargetSize`	点击区域大小

示例：

Dart 复制代码

Radio<int>(
  value: 1,
  groupValue: selectedValue,
  activeColor: Colors.blue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value!;
    });
  },
)

4. 使用 RadioListTile 创建单选列表

RadioListTile 将 Radio 与 ListTile 结合，使单选按钮带有文本和描述。

Dart 复制代码

RadioListTile<int>(
  title: Text('选项 1'),
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value!;
    });
  },
),
RadioListTile<int>(
  title: Text('选项 2'),
  value: 2,
  groupValue: selectedValue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value!;
    });
  },
)

5. 结论

Radio 是 Flutter 提供的单选按钮组件，适用于多个选项选择一个的场景。结合 RadioListTile，可以提升 UI 体验。掌握 Radio 的基本用法和自定义样式，有助于构建更灵活的交互界面。

Flutter 输入组件 Radio 详解

1. 引言

2. Radio 的基本用法

3. 主要属性

4. 使用 RadioListTile 创建单选列表

5. 结论

相关推荐