自定义小部件未按预期工作-GetX包Flutter

Question

我创建了一个自定义小部件来创建一个按钮，如图所示。阶段选项运行良好，但当我切换到投标列表选项时，我会得到这样的输出。为什么当我选择投标清单选项时，阶段是灰色的，但反之亦然？有人能纠正吗？我在我的项目中使用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'),
))),
);
}
}

这是各自的控制器

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

只需将您的方法替换为以下方法，

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

Answer 3

它们是两种类型的更改值，也是从其状态派生的样品

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
}
}

更改其状态

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

试试看。