在 flutter 中創建五個按鈕 單擊按鈕時，應立即按下一個按鈕，其顏色應更改，同時重構小部件

Question

在 flutter 中連續創建五個按鈕，這樣一次只能按下一個按鈕，當按下按鈕時，它的顏色應該從白色變為紅色，文本顏色也應該改變，同時重構按鈕小部件。

我使用過 Material 按鈕，但問題是當只按下一個按鈕時，所有按鈕的重置都會自動按下，並且不會再次取消點擊

代碼

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

class DataModel {
  String button;
  bool isSelected;

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

像下面這樣放置小部件 class

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),
        ),
      ),
    );
  }
}

如果想要 select 單項列表，請更改 ontap 方法

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

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

                  });