单击按钮列表时更改按钮颜色
单击按钮列表时更改按钮颜色
提问于 2022-05-13 08:56:21
我的应用程序中有一个按钮列表，每个按钮都应该过滤一个项目列表。所有的按钮有相同的颜色，我想这样，只有一个按钮有一个活动的颜色，无论哪个按钮被点击。目前，当我单击一个按钮时，最终会更改所有按钮的颜色。
这是我的密码
final blueColors = const Color(0xff295a7c);
final blueShades = const Color(0xffccdef2);
final blackColors = const Color(0xff000000);
final whiteColors = const Color(0xffffffff);
Padding(
padding: const EdgeInsets.all(10),
child: SizedBox(
height: 40,
child: ListView(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
children: [
Padding(
padding: const EdgeInsets.all(3),
child: Obx(
() => TextButton(
onPressed: () {
controller.changeButton();
},
child: Text(
'All',
style: theme.textTheme.bodyText2!.copyWith(
color: controller.whenPressed.value == true ? whiteColors : blackColors,
fontSize: 13,
fontWeight: FontWeight.w400,
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor:
controller.whenPressed.value == true
? blueColors
: blueShadeColors,
onSurface: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3),
child: Obx(
() => TextButton(
onPressed: () {
controller.changeButton();
},
child: Text(
'option 2',
style: theme.textTheme.bodyText2!.copyWith(
color: controller.whenPressed.value == true ? whiteColors : blackColors,
fontSize: 13,
fontWeight: FontWeight.w400,
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor:
controller.whenPressed.value == true
? blueColors
: blueShadeColors,
onSurface: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3),
child: Obx(
() => TextButton(
onPressed: () {
controller.changeButton();
},
child: Text(
'option 3',
style: theme.textTheme.bodyText2!.copyWith(
color: controller.whenPressed.value == true ? whiteColors : blackColors,
fontSize: 13,
fontWeight: FontWeight.w400,
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor:
controller.whenPressed.value == true
? blueColors
: blueShadeColors,
onSurface: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3),
child: Obx(
() => TextButton(
onPressed: () {
controller.changeButton();
},
child: Text(
'option 4',
style: theme.textTheme.bodyText2!.copyWith(
color: controller.whenPressed.value == true ? whiteColors : blackColors,
fontSize: 13,
fontWeight: FontWeight.w400,
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor:
controller.whenPressed.value == true
? blueColors
: blueShadeColors,
onSurface: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
),
),
],
),
),
), 我用Getx来做陈述。这是我的控制器代码。
var whenPressed = false.obs;
void changeButton() {
whenPressed.value = !whenPressed.value;
update();
}我如何修改它，使只有一个按钮将得到任何点击事件的活动按钮颜色。
Stack Overflow用户
发布于 2022-05-13 13:49:14
问题你的所有按钮使用相同的控制器。我猜你的页面里有这样的代码。
final controller = Get.put(Controller());
// maybe you put controller on another area then you used like this
//final controller = Get.find<Controller>(); 为您的按钮使用不同的控制器，记住，如果您不将标记设置为控制器，它们将不会是不同的。
final controllerAll = Get.put(Controller(), tag: "ALL");
final controllerOption1 = Get.put(Controller(), tag: "OPTION1");
final controllerOption2 = Get.put(Controller(), tag: "OPTION2");
final controllerOption3 = Get.put(Controller(), tag: "OPTION3");因此，当您单击任何按钮，只有该按钮将具有活动的颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72226917
复制相关文章
相似问题
腾讯云开发者
