Flutter 之 Radio （六十）

Radio 是一个常见的单选框

1. Radio

Radio 定义

  const Radio({
    Key? key,
    required this.value,
    required this.groupValue,
    required this.onChanged,
    this.mouseCursor,
    this.toggleable = false,
    this.activeColor,
    this.fillColor,
    this.focusColor,
    this.hoverColor,
    this.overlayColor,
    this.splashRadius,
    this.materialTapTargetSize,
    this.visualDensity,
    this.focusNode,
    this.autofocus = false,
  })

Radio 属性介绍

Radio属性	介绍
value	@required 是否选中
groupValue	@required 一组单选按钮的当前选定值
onChanged	@required 点击事件
mouseCursor	鼠标光标
toggleable	是否可切换
activeColor	选中时填充颜色
fillColor	选中时填充颜色 为空时 使用 activeColor
focusColor	聚焦颜色
hoverColor	悬停颜色
overlayColor	层叠颜色，为空时，使用带alpha的activeColor
splashRadius	飞溅半径
materialTapTargetSize	内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小
visualDensity	布局紧凑设置
focusNode	焦点控制
autofocus	自动聚焦，默认为 false

2. 示例

基本使用

class MSRadioDemo1 extends StatefulWidget {
  const MSRadioDemo1({Key? key}) : super(key: key);

  @override
  State<MSRadioDemo1> createState() => _MSRadioDemo1State();
}

class _MSRadioDemo1State extends State<MSRadioDemo1> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("RadioDemo")),
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildRadio(1),
            _buildRadio(2),
            _buildRadio(3),
            _buildRadio(4),
            _buildRadio(5),
          ],
        ),
      ),
    );
  }

  int _groupValue = 1;

  _buildRadio(int index) {
    return Radio(
      value: index,
      groupValue: _groupValue,
      onChanged: (int? value) {
        print(value);
        setState(() {
          _groupValue = value!;
        });
      },
    );
  }
}

83.gif

选中事件

注意与 CheckBox 不同的是，CheckBox 的 value 是用来记住当前框是否是勾选状态。Radio 的 value 只是给 Radio 设置的一个标识，而 groupValue 则是选中的标识。

例如，3个 Radio 的 value 分别为数字 1，2，3。此时 groupValue = 1 则会选中第一个，groupValue = 3 则会选中第三个。

例如，3个 Radio 的 value 分别为字符串 "aa"，"bb"，"cc"，此时 groupValue = "aa" 则会选中第一个，groupValue = "cc"则会选中第三个。

颜色

activeColor、fillColor、overlayColor

class MSRadioDemo2 extends StatefulWidget {
  const MSRadioDemo2({Key? key}) : super(key: key);

  @override
  State<MSRadioDemo2> createState() => _MSRadioDemo2State();
}

class _MSRadioDemo2State extends State<MSRadioDemo2> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            _buildRadio("aa"),
            _buildRadio("bb"),
            _buildRadio("cc"),
            _buildRadio("dd"),
          ],
        ),
      ),
    );
  }

  String _groupValue = "aa";
  _buildRadio(String flag) {
    return Radio(
      fillColor: MaterialStateProperty.all(Colors.amber),
      overlayColor: MaterialStateProperty.all(Colors.red),
      value: flag,
      groupValue: _groupValue,
      onChanged: (value) {
        print(value);
        setState(() {
          _groupValue = flag;
        });
      },
    );
  }
}

85.gif

Radio进阶

这里做一个例子，只能选择一项的问卷。
根据需要，批量创建复选框及标题。
创建数据模型，保存每一个标题名称及状态。
保存当前选中状态，以及数据处理。

参考：https://www.jianshu.com/p/eac64e08cb6e