在flutter中创建五个按钮，单击按钮时应立即按下一个按钮，其颜色应更改并重构小部件

Question

在 flutter 中连续创建五个按钮，这样一次只能按下一个按钮，按下按钮时，其颜色应从白色变为红色，文本颜色也应从白色变为红色，同时重构按钮小部件。

我已经使用了材质按钮，但问题是，当只按下一个时，按钮的所有重置都会自动按下，并且不会再次取消单击

代码

class SizeButton extends StatefulWidget {
  String text;
  bool small = false;
  bool medium = false;
  bool large = false;
  bool extraLarge = false;

  SizeButton({Key? key, required this.text}) : super(key: key);


  @override
  State<SizeButton> createState() => SizeButtonState();

}

class SizeButtonState extends State<SizeButton> {
  bool isClicked = false;

  void selectSize(String size) {
    setState(() {
      if (size == 'S') {
        widget.small = !widget.small;
        widget.medium = false;
        widget.large = false;
        widget.extraLarge = false;
      } else if (size == 'M') {
        widget.small = false;
        widget.medium = !widget.medium;
        widget.large = false;
        widget.extraLarge = false;
      } else if (size == 'L') {
        widget.small = false;
        widget.medium = false;
        widget.large = !widget.large;
        widget.extraLarge = false;
      } else if (size == 'XL') {
        widget.small = false;
        widget.medium = false;
        widget.large = false;
        widget.extraLarge= !widget.extraLarge;
      }
      isClicked = widget.small || widget.medium || widget.large || widget.extraLarge;
    });
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        width: 40,
        height: 40,
        decoration: BoxDecoration(
          border:Border.all(color: Colors.grey, width: 1.w),
          shape: BoxShape.circle,
          color: isClicked ? Colors.pink : Colors.white,
        ),
        child: Center(
          child: Text(widget.text,
            style: TextStyle(
              fontSize: 20.sp,
              color: isClicked ? Colors.white : Colors.black,
            ),
          ),
        ),
      ),
      onTap: () {
        selectSize(widget.text);
      },
    );
  }
}

Answer 1

创建数据模型类

class DataModel {
  String button;
  bool isSelected;

  DataModel(this.button, this.isSelected);
}

像下面一样放置小部件类

class RecordChaseMoneyPage extends StatefulWidget {
  const RecordChaseMoneyPage({super.key});

  @override
  State<RecordChaseMoneyPage> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<RecordChaseMoneyPage> {
  List<DataModel> list = [];

  @override
  void initState() {
    super.initState();

    list.add(DataModel("1", false));
    list.add(DataModel("2", false));
    list.add(DataModel("3", false));
    list.add(DataModel("4", false));
    list.add(DataModel("5", false));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 30,
          child: ListView.separated(
              scrollDirection: Axis.horizontal,
              itemBuilder: (c, index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      if (!list[index].isSelected) {
                        list[index].isSelected = true;
                      }
                    });
                  },
                  child: Container(
                    height: 20,
                    width: 40,
                    color: list[index].isSelected ? Colors.red : Colors.blue,
                  ),
                );
              },
              separatorBuilder: (c, i) {
                return const SizedBox(width: 10);
              },
              itemCount: list.length),
        ),
      ),
    );
  }
}

如果想选择列表中的单个项目，请更改 ontap 方法

setState(() {
                    list[index].isSelected = !list[index].isSelected;

                    for (var i = 0; i < list.length; i++) {
                      if (i != index) {
                        list[i].isSelected = false;
                      }
                    }

                  });

Answer 2

制作按钮列表

List button = [
'S',
'M',
'L',];

int selectedIndex = 0;

添加 ListView Builder 以显示按钮

Expanded(
    child: ListView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (context, index) {
      return InkWell(
        onTap: () {
          selectedIndex = index;
          print(button[index]);
          setState(() {});
        },
        child: Container(
          height: 20,
          width: 40,
          color: selectedIndex == index ? Colors.red : Colors.blue,
        ),
      );
    }),