《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显示选中状态,效果如下:
通常情况下,有多个单选按钮,当选中一个时,其他自动变为未选中状态,用法如下:
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;
});
},
)),
],
)
效果如下: