Flutter 输入组件 Radio 详解

1. 引言

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

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

1. int selectedValue = 1;
3. Row(
4.   children: [
5.     Radio<int>(
6.       value: 1,
7.       groupValue: selectedValue,
8.       onChanged: (int? value) {
9.         setState(() {
10.           selectedValue = value!;
11.         });
12.       },
13.     ),
14.     Radio<int>(
15.       value: 2,
16.       groupValue: selectedValue,
17.       onChanged: (int? value) {
18.         setState(() {
19.           selectedValue = value!;
20.         });
21.       },
22.     ),
23.   ],
24. )

复制代码

3. 重要属性

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

1. Radio<int>(
2.   value: 1,
3.   groupValue: selectedValue,
4.   activeColor: Colors.blue,
5.   onChanged: (int? value) {
6.     setState(() {
7.       selectedValue = value!;
8.     });
9.   },
10. )

复制代码

4. 使用 RadioListTile 创建单选列表

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

1. RadioListTile<int>(
2.   title: Text('选项 1'),
3.   value: 1,
4.   groupValue: selectedValue,
5.   onChanged: (int? value) {
6.     setState(() {
7.       selectedValue = value!;
8.     });
9.   },
10. ),
11. RadioListTile<int>(
12.   title: Text('选项 2'),
13.   value: 2,
14.   groupValue: selectedValue,
15.   onChanged: (int? value) {
16.     setState(() {
17.       selectedValue = value!;
18.     });
19.   },
20. )

复制代码

5. 结论

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

Flutter IconButton完全指南：高效使用与性能优化秘笈-CSDN博客文章欣赏阅读1.4k次，点赞46次，收藏24次。IconButton 是一个带有图标的按钮组件，通常用于工具栏、导航栏或交互操作。IconButton 继承自 StatelessWidget，支持点击变乱、大小、颜色等多种自定义属性。本文将介绍 IconButton 的根本用法、重要属性及自定义样式。

https://shuaici.blog.csdn.net/article/details/146069934Flutter TextField 从入门到精通：掌握输入框的完备指南-CSDN博客文章欣赏阅读918次，点赞39次，收藏29次。本文全面解析 Flutter TextField 控件的使用本领，覆盖从底子到进阶的完备知识体系。入门部门讲解底子属性（controller、decoration）、键盘类型设置和文本监听；进阶部门深入探究表单验证（Form+TextFormField）、自定义输入格式（正则表达式验证）、动态样式修改（圆角/图标/动画）以及高级功能（输入长度限制、防抖处理）。通过代码示例演示手机号输入验证、密码隐藏切换、输入掩码等实战场景，并提供多平台适配、性能优化和无障碍访问等最佳实践方案。_flutter textfield

https://shuaici.blog.csdn.net/article/details/146068520

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。