单击按钮列表时更改按钮颜色
单击按钮列表时更改按钮颜色
提问于 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();
}我如何修改它，使只有一个按钮将得到任何点击事件的活动按钮颜色。
回答 2
Stack Overflow用户
发布于 2022-05-13 13:48:15
我找到了一种方法，可以在按下按钮时改变单个按钮的颜色。
我将此代码添加到控制器中
var _selectedButton = 0.obs;
List<String> categories = [
'All',
'Option 1',
'Option 2',
'Option 3',
'Option 4',
'Option 5',
];然后添加此方法
int changeButton(int index) {
_selectedButton.value = index;
update();
return _selectedButton.value;
}最后，我用以下代码替换了视图
ListView.separated(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (context, index) {
return Obx(
() => TextButton(
onPressed: () {
controller.changeButton(index);
},
child: Text(
controller.categories[index],
style: theme.textTheme.bodyText2!.copyWith(
color: controller._selectedButton.value == index
? whiteColor
: blackColor,
fontSize: 13,
fontWeight: FontWeight.w400,
),
),
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor:
controller._selectedButton.value == index
? blueColor
: blueShadeColor,
onSurface: Colors.grey,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(20),
),
),
),
),
);
},
itemCount: controller.categories.length,
separatorBuilder: (context, index) =>
const SizedBox(width: 5),
),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
复制相关文章
相似问题
腾讯云开发者
