欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-11 11:00:19
...
  • 如果你对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显示选中状态,效果如下:

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

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

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;
          });
        },
      ),
    ],
  );
}

效果如下:

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

activeColor是选中状态下颜色,用法如下:

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

效果如下:

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

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;
        });
      },
    )),
  ],
)

效果如下:

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

相关标签: # Flutter Widgets