1. 基本介绍
Radio 是一个常见的单选框。
2. 示例代码
代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。
3. Radio 属性介绍
| Radio属性 | 介绍 |
|---|---|
| value | @required 是否选中 |
| groupValue | @required |
| onChanged | @required 点击事件 |
| mouseCursor | 鼠标光标 |
| toggleable | |
| activeColor | 选中时填充颜色 |
| focusColor | 聚焦颜色 |
| hoverColor | 悬停颜色 |
| materialTapTargetSize | 内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小 |
| visualDensity | 布局紧凑设置 |
| focusNode | 焦点控制，Flutter 组件之 FocusNode 详解 |
| autofocus | 自动聚焦，默认为 false |
4. Radio 详解
4.1 容器创建
import 'package:flutter/material.dart';
class FMRadioVC extends StatefulWidget{
@override
FMRadioState createState() => FMRadioState();
}
class FMRadioState extends State {
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("CheckBox"),
),
body: Center(
child: _radioRow(),
),
);
}
Row _radioRow(){
return Row(
children: [
_colorfulCheckBox(1),
_colorfulCheckBox(2),
_colorfulCheckBox(3),
_colorfulCheckBox(4),
_colorfulCheckBox(5),
_colorfulCheckBox(6),
],
);
}
int groupValue = 1;
Radio _colorfulCheckBox(index){
return Radio(
value: index,
groupValue: groupValue,
onChanged: (value){
print(value);
groupValue = index;
setState(() {
});
},
);
}
}
Radio normal.gif
4.2 选中事件
注意与 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"则会选中第三个。
4.3 颜色
使用 activeColor 改变选中后颜色。
Radio _colorfulCheckBox(index){
return Radio(
value: index,
groupValue: groupValue,
activeColor: Colors.red,
onChanged: (value){
print(value);
groupValue = index;
setState(() {
});
},
);
}
Radio colors.png
5. Radio进阶
这里做一个例子，只能选择一项的问卷。
- 根据需要，批量创建复选框及标题。
- 创建数据模型，保存每一个标题名称及状态。
- 保存当前选中状态，以及数据处理。
相信能看到这里的，对 flutter 也不在陌生了，这里我就简单点，直接上代码。
import 'package:flutter/material.dart';
class FMRadioVC extends StatefulWidget{
@override
FMRadioState createState() => FMRadioState();
}
class FMRadioState extends State {
List _datas = [];
int groupValue = 1;
@override
void initState() {
// TODO: implement initState
super.initState();
initData();
}
void initData(){
_datas.add(FMRadioModel(1, "游戏"));
_datas.add(FMRadioModel(2, "社交"));
_datas.add(FMRadioModel(3, "购物"));
_datas.add(FMRadioModel(4, "娱乐"));
_datas.add(FMRadioModel(5, "影视"));
setState(() {
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("CheckBox"),
),
body: ListView.builder(
itemCount: _datas.length,
itemBuilder: (context, index){
FMRadioModel model = _datas[index];
return _buildRow(model);
}
),
bottomSheet: _bottomSheet(),
);
}
BottomSheet _bottomSheet(){
return BottomSheet(
onClosing: (){},
builder: (BuildContext context){
return Container(
height: 60,
color: Colors.cyan,
child: Text(_selectedBoxs()),
alignment: Alignment.center,
);
},
);
}
String _selectedBoxs(){
String string = "";
_datas.forEach((FMRadioModel model) {
if (model.index == groupValue) {
string = "你当前选择的是: " + "${model.text} ";
}
});
return string;
}
Row _buildRow(FMRadioModel model){
return Row(
children: [
_radio(model),
Text("${model.text}")
],
);
}
Radio _radio(FMRadioModel model){
return Radio(
value: model.index,
groupValue: groupValue,
onChanged: (index){
groupValue = index;
print(index);
setState(() {
});
}
);
}
}
class FMRadioModel extends Object {
int index;
String text;
FMRadioModel(this.index, this.text);
}
Radio more.gif
6. 技术小结
- Radio 作为单选框没有太多难度，实际应用也不是很多，了解即可。