Flutter Radio单选
本文介绍了Flutter中单选按钮Radio和RadioListTile组件的使用。Radio组件通过value和groupValue判断选中状态,提供onChange事件监听;RadioListTile扩展了Radio功能,支持设置主副标题(title/subtitle)、布局密度(dense)和控件位置(controlAffinity)。文中包含两个完整示例:第一个展示性别选择(男/女),第二
·
Radio 单选按钮
| 属性 | 说明 |
|---|---|
| value | 设置单选按钮表示的值 |
| onChange | 监听选中 |
| activeColor | 设置单选按钮选中时的颜色 |
当groupValue与value值一致,认为被选中。

void main() {
runApp(MyPage());
}
class MyPage extends StatelessWidget {
const MyPage({super.key});
Widget build(BuildContext context) {
return MaterialApp(theme: ThemeData(), home: RadioFul());
}
}
class MyState extends State {
var sex = "男";
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("性格"), centerTitle: true),
body: Row(
children: [
Text("请选择性别:"),
Radio(
value: "男",
groupValue: sex,
onChanged: (value) {
setState(() {
sex = "男";
});
},
),
Text("男"),
Radio(
value: "女",
groupValue: sex,
onChanged: (value) {
setState(() {
sex = "女";
});
},
),
Text("女"),
Text(" 选择的性别:$sex")
],
),
);
}
}
class RadioFul extends StatefulWidget {
State<StatefulWidget> createState() {
return MyState();
}
}
RadioListTile
| 属性 | 说明 |
|---|---|
| title | 设置主标题 |
| subtitle | 设置副标题 |
| dense | 设置是否垂直密集 显示标题 |
| controlAffinity | 选中相对于文字的位置,取值leading,plaform,trailing |

void main() {
runApp(MyPage());
}
class MyPage extends StatelessWidget {
const MyPage({super.key});
Widget build(BuildContext context) {
return MaterialApp(theme: ThemeData(), home: RadioFul());
}
}
class MyState extends State {
int selected = -1;
List<String> list = ["Java", "Swift", "Dart", "Kotlin"];
//A. Java B. Swift C. Dart D. Kotlin
Widget build(BuildContext context) {
Column column = Column(
children: [
Text("Flutter使用的编程语言是()"),
RadioListTile(
title: Text("A."),
subtitle: Text(list[0]),
value: 0,
groupValue: selected,
onChanged: (value) {
setState(() {
selected = value!;
});
},
),
RadioListTile(
title: Text("B."),
subtitle: Text(list[1]),
value: 1,
groupValue: selected,
onChanged: (value) {
setState(() {
selected = value!;
});
},
),RadioListTile(
title: Text("C."),
subtitle: Text(list[2]),
value: 2,
groupValue: selected,
onChanged: (value) {
setState(() {
selected = value!;
});
},
),
RadioListTile(
title: Text("D."),
subtitle: Text(list[3]),
value: 3,
groupValue: selected,
onChanged: (value) {
setState(() {
selected = value!;
});
},
),
Text("你的选择:$selected")
],
);
return Scaffold(
appBar: AppBar(title: Text("单选题"), centerTitle: true),
body: column,
);
}
}
class RadioFul extends StatefulWidget {
State<StatefulWidget> createState() {
return MyState();
}
}
火山引擎开发者社区是火山引擎打造的AI技术生态平台,聚焦Agent与大模型开发,提供豆包系列模型(图像/视频/视觉)、智能分析与会话工具,并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长,新用户可领50万Tokens权益,助力构建智能应用。
更多推荐
所有评论(0)