大家好，又见面了，我是你们的朋友全栈君。
Radio 单选框
目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒
【x1】点击查看提示
【x2】各种系列的教程
【x3】Flutter文章积累目录
1 flutter单选框Radio的基本使用
代码语言：javascript复制 ///单选框的基本使用
///默认选中的单选框的值
int groupValue = 0;
Radio buildRadioUseWidget() {
return Radio(
///此单选框绑定的值 必选参数
value: 0,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
);
}运行效果如下图所示
在实际项目开发中，一般单选框都会成组使用，不会单独使用，如下图所示效果：
代码如下：
代码语言：javascript复制 ///默认选中的单选框的值
int groupValue = 0;
///单选框的成组使用
Row buildRadioGroupWidget() {
return Row(children: [
Radio(
///此单选框绑定的值 必选参数
value: 0,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Radio(
///此单选框绑定的值 必选参数
value: 1,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Radio(
///此单选框绑定的值 必选参数
value: 2,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
)
],);
}如下图所示效果，是在实际项目中也比较常用的一种设计效果，单选框与文字结合使用，在水平方向通过结合Row来实现
///默认选中的单选框的值
int groupValue = 0;
///单选框的成组使用
Row buildRadioGroupRowWidget() {
return Row(
children: [
Row(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [
Radio(
///此单选框绑定的值 必选参数
value: 0,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Text("语文")
],
),
Row(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [
Radio(
///此单选框绑定的值 必选参数
value: 1,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Text("数学")
],
),
Row(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [
Radio(
///此单选框绑定的值 必选参数
value: 2,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Text("英语")
],
),
],
);
}在这里需要注意的是水平线性布局Row默认的填充父布局的，用在这里的话，需要将其设置为包裹子布局的方式，通过配置mainAxisSize的值为MainAxisSize.min来实现。 在上图的效果基础上进行一些改造，将单选框Radio与文字的排列方式使用线性布局Column来组件，实现的效果如下图所示，对应的关键代码如下：
代码如下：
代码语言：javascript复制///单选框的成组使用
///默认选中的单选框的值
int groupValue = 0;
Row buildRadioGroupColumnWidget() {
return Row(
children: [
Column(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [
Radio(
///此单选框绑定的值 必选参数
value: 0,
///当前组中这选定的值 必选参数
groupValue: groupValue,
///点击状态改变时的回调 必选参数
onChanged: (v) {
setState(() {
this.groupValue = v;
});
},
),
Text("语文")
],
),
Column(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [... ... 省略 ],
),
Column(
///包裹子布局
mainAxisSize: MainAxisSize.min,
children: [... ... 省略 ],
),
],
);
}目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒
【x1】点击查看提示
【x2】各种系列的教程
【x3】Flutter文章积累目录
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/140609.html原文链接：https://javaforall.cn
