英文:
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,
          ),
      ],
    );
  }
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。



评论