《Flutter 控件大全》第七十二：Radio 和RadioListTile

• 如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。
• 同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。
• Flutter地址：http://laomengit.com 里面包含160多个组件的详细用法。

Radio为单选控件，基本用法如下：

var _radioValue = '1';
var _radioGroupValue = '';
_buildEditable() {
  return Radio(
    value: _radioValue,
    groupValue: _radioGroupValue,
    onChanged: (value){
      print('$value');
      setState(() {
        _radioGroupValue = value;
      });
    },
  );
}

Radio控件本身没有State状态，当value的值和groupValue值相等时，Radio显示选中状态，效果如下：

通常情况下，有多个单选按钮，当选中一个时，其他自动变为未选中状态，用法如下：

var _radioGroupValue = '语文';
_buildEditable() {
  return Row(
    children: <Widget>[
      Radio(
        value: '语文',
        groupValue: _radioGroupValue,
        onChanged: (value){
          setState(() {
            _radioGroupValue = value;
          });
        },
      ),
      Radio(
        value: '数学',
        groupValue: _radioGroupValue,
        onChanged: (value){
          setState(() {
            _radioGroupValue = value;
          });
        },
      ),
      Radio(
        value: '英语',
        groupValue: _radioGroupValue,
        onChanged: (value){
          setState(() {
            _radioGroupValue = value;
          });
        },
      ),
    ],
  );
}

效果如下：

activeColor是选中状态下颜色，用法如下：

Radio(
  activeColor: Colors.red,
  ...
)

效果如下：

RadioListTile

通常情况下，需要在Radio控件的后面添加说明，用户需要知道自己选择的是什么，当然我们可以直接在Radio后面添加Text控件，不过，Flutter已经为我们提供了相应的控件，就是RadioListTile，通过名字我们就知道这是一个Radio和ListTile 组合的控件，关于ListTile的用法可以查看ListTile，用法如下：

Row(
  children: <Widget>[
    Flexible(
      child: RadioListTile(
        title: Text('语文'),
        value: '语文',
        groupValue: _radioGroupValue,
        onChanged: (value) {
          setState(() {
            _radioGroupValue = value;
          });
        },
      ),
    ),
    Flexible(
        child: RadioListTile(
      title: Text('数学'),
      value: '数学',
      groupValue: _radioGroupValue,
      onChanged: (value) {
        setState(() {
          _radioGroupValue = value;
        });
      },
    )),
    Flexible(
        child: RadioListTile(
      title: Text('英语'),
      value: '英语',
      groupValue: _radioGroupValue,
      onChanged: (value) {
        setState(() {
          _radioGroupValue = value;
        });
      },
    )),
  ],
)

效果如下：

查看专栏详情 立即解锁全部专栏