英文:
Flutter Colored Radio Button
问题
在Flutter中,如何创建这种类型的有颜色的单选按钮?
答案1
得分: 0
你可以创建N个项目,每个项目都可以用不同的小部件(如 Container)来表示圆形。仅当选择该项目时,放置复选框。
enum ItemColor {
white(Colors.white),
red(Colors.red),
green(Colors.green),
blue(Colors.blue);
const ItemColor(this.color);
final Color color;
}
class _RBSelectionState extends State<RBSelection> {
ItemColor? selectedItem;
@override
Widget build(BuildContext context) {
return Column(
children: [
for (ItemColor item in ItemColor.values)
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: item.color,
shape: const CircleBorder(),
fixedSize: Size(100, 100),
),
onPressed: () {
setState(() {
selectedItem = item;
});
},
child: selectedItem == item ? const Icon(Icons.check) : null,
),
],
);
}
}
英文:
You can create N items with many different widgets like Container, that will represent the circle. And place checkbox only when the item is selected.
enum ItemColor {
white(Colors.white),
red(Colors.red),
green(Colors.green),
blue(Colors.blue);
const ItemColor(this.color);
final Color color;
}
class _RBSelectionState extends State<RBSelection> {
ItemColor? selectedItem;
@override
Widget build(BuildContext context) {
return Column(
children: [
for (ItemColor item in ItemColor.values)
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: item.color,
shape: const CircleBorder(),
fixedSize: Size(100, 100),
),
onPressed: () {
setState(() {
selectedItem = item;
});
},
child: selectedItem == item ? const Icon(Icons.check) : null,
),
],
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论