自定義小部件無法按預期工作 - GetX package Flutter

Question

我創建了一個自定義小部件來創建圖像中的按鈕。 Stages 選項工作正常，但是當我切換到 Bids List 選項時，我得到一個 output 像這樣。 為什么當我 select 投標列表選項時，階段以灰色顯示，反之亦然？ 任何人都可以糾正它嗎？ 我在我的項目中使用 GetX。

選擇選項按鈕.dart

class SelectOptionButton extends StatelessWidget {
  SelectOptionButton({Key? key}) : super(key: key);

  final grey = const Color.fromARGB(50, 158, 158, 158);
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(color: Color(0xffc8a2c8) // Color(0xffE0E0E0),
                ), //  Color.fromARGB(165, 158, 158, 158)),
            BoxShadow(
                color: Colors.white, // Color.fromARGB(21, 158, 158, 158),
                spreadRadius: -1.0,
                blurRadius: 15.0)
          ], //color: grey,
          borderRadius: BorderRadius.all(Radius.circular(5))),
      padding:
          const EdgeInsets.only(top: 0.05, bottom: 0.05, left: 7, right: 7),
      child: Row(children: [
        SpecificButton(
            isFirstOptionSelected: true, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: false, buttonName: 'Bids List', id: 2),
      ]),
    );
  }
}

class SpecificButton extends StatelessWidget {
  SpecificButton(
      {Key? key,
      required this.isFirstOptionSelected,
      required this.buttonName,
      required this.id})
      : super(key: key);
  int id;
  bool isFirstOptionSelected;
  String buttonName;

  final SelectOptionButtonController _selectOptionButtonController =
      Get.put(SelectOptionButtonController());
  final grey = Color.fromARGB(23, 243, 243, 243);
  @override
  Widget build(BuildContext context) {
    return Obx(
      () => Expanded(
          child: ElevatedButton(
              style: TextButton.styleFrom(
                elevation: isFirstOptionSelected ? 1.5 : 0, //1.5:0,
                backgroundColor: isFirstOptionSelected
                    ? _selectOptionButtonController.isFirstOptionSelected.value
                        ? Colors.white
                        : Colors.transparent //grey
                    : !_selectOptionButtonController.isFirstOptionSelected.value
                        ? Colors.white
                        : Colors.transparent, //grey,
                primary: isFirstOptionSelected
                    ? _selectOptionButtonController.isFirstOptionSelected.value
                        ? MyColors.primaryGradient
                        : Colors.black
                    : !_selectOptionButtonController.isFirstOptionSelected.value
                        ? MyColors.primaryGradient
                        : Colors.black,
              ),
              onPressed: () {
                (id == 1 &&
                            _selectOptionButtonController
                                    .isFirstOptionSelected.value ==
                                true) ||
                        (id == 2 &&
                            _selectOptionButtonController
                                    .isFirstOptionSelected.value ==
                                false)
                    ? null
                    : _selectOptionButtonController.changeSelected();
              },
              child: Text(
                buttonName,
                style: TextStyle(fontFamily: 'HelveticaBold'),
              ))),
    );
  }
}

這是各自的 controller

class SelectOptionButtonController extends GetxController {
  var isFirstOptionSelected = true.obs;

  void changeSelected() {
    isFirstOptionSelected.value = !isFirstOptionSelected.value;
  }
}

Answer 1

您必須使用Obx()來反映更改

Obx(() => Row(children: [
        SpecificButton(
            isFirstOptionSelected: true, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: false, buttonName: 'Bids List', id: 2),
      ]),)

Answer 2

它們是改變值的兩種類型，這也來自它的 state 樣本

class SelectOptionButtonController extends GetxController {
  var isFirstOptionSelected = true.obs;

  void changeSelected() {
    /// this part lack below called update();
    isFirstOptionSelected.value = !isFirstOptionSelected.value;
    update(); /// try add this to change the value good to use on this is GetBuilder
    /// or
    /// isFirstOptionSelected(!isFirstOptionSelected.value);
    /// changing value for Obx
   }
}

改變它 state

return Obx(()
  => Container(
      decoration: const BoxDecoration(
          boxShadow: [
            BoxShadow(color: Color(0xffc8a2c8) // Color(0xffE0E0E0),
                ), //  Color.fromARGB(165, 158, 158, 158)),
            BoxShadow(
                color: Colors.white, // Color.fromARGB(21, 158, 158, 158),
                spreadRadius: -1.0,
                blurRadius: 15.0)
          ], //color: grey,
          borderRadius: BorderRadius.all(Radius.circular(5))),
      padding:
          const EdgeInsets.only(top: 0.05, bottom: 0.05, left: 7, right: 7),
      child: Row(children: [
        SpecificButton(
            isFirstOptionSelected: controller.isFirstOptionSelected.isTrue, buttonName: 'Stages', id: 1),
        SpecificButton(
            isFirstOptionSelected: controller.isFirstOptionSelected.isFalse, buttonName: 'Bids List', id: 2),
      ]),
    );
  );

試試看。

Answer 3

只需將您的方法替換為以下方法，

void changeSelected() {
isFirstOptionSelected.value =! isFirstOptionSelected.value; }