我想使用按钮来过滤用户列表。所以我创建了一个按钮组。这个按钮组很像一个单选按钮组。它只接受一个值。用户按下按钮后，它应该改变背景颜色。但是当按钮在列表中时，我不知道如何在用户按下按钮后更改按钮颜色。
有人可以帮忙吗？例如，我想让用户知道他/她在哪个年龄段接受采访。
这是我的代码。
class BottomPop extends StatefulWidget {
_BottomPopState createState() => _BottomPopState();
}
class _BottomPopState extends State<BottomPop> {
List<String> _a = ["0-20", "21-40", "41-60", "61+"];
List<String> _b = ["< 1year", "1-2 years", "2-3 years", "3+ year"];
@override
Widget build(BuildContext context) {
return
new ListView(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
padding: EdgeInsets.all(10),
children: [
Text(
"Age",
style: TextStyle(fontSize: 18),
),
Padding(
padding: EdgeInsets.only(top: 10),
),
GridView.count(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 100 / 50,
crossAxisCount: 4,
children: _a
.map(
(f) => InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xffaaaaaa))),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
child: Center(
child: Text(f),
)),
onTap: () {},
),
)
.toList()),
Padding(
padding: EdgeInsets.only(top: 20),
),
Text(
"Experiences",
style: TextStyle(fontSize: 18),
),
Padding(
padding: EdgeInsets.only(top: 10),
),
GridView.count(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 100 / 50,
crossAxisCount: 4,
children: _b
.map(
(f) => InkWell(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xffaaaaaa))),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
child: Center(
child: Text(f),
)),
onTap: () {},
),
)
.toList()),
Padding(
padding: EdgeInsets.only(top: 20),
),
Row(
children: [
FlatButton(
color: Colors.lightBlue,
child: Text("Filter"),
onPressed: () {},
),
Padding(
padding: EdgeInsets.only(right: 10),
),
FlatButton(
color: Colors.red,
child: Text("Clear"),
onPressed: () {},
),
],
)
],
);
}
}
这是一个屏幕截图。
最佳答案
编辑后的答案:
创建一个类来存储bool和String:
class MyButtonModal {
final String buttonText;
bool changeButtonColor;
MyButtonModal({this.buttonText, this.changeButtonColor = false});
}
List<MyButtonModal> _a = [
MyButtonModal(buttonText: "0-20"),
MyButtonModal(buttonText: "21-40"),
MyButtonModal(buttonText: "41-60"),
MyButtonModal(buttonText: "61+"),
];
List<MyButtonModal> _b = [
MyButtonModal(buttonText: "< 1year"),
MyButtonModal(buttonText: "1-2 years"),
MyButtonModal(buttonText: "2-3 years"),
MyButtonModal(buttonText: "3+ year"),
];
并将您的 GridView.count 替换为第一个:
GridView.count(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 100 / 50,
crossAxisCount: 4,
children: _a.map((MyButtonModal f) {
return InkWell(
child: Container(
decoration: BoxDecoration(
color: f.changeButtonColor
? Colors.blue
: Colors.white,
borderRadius: BorderRadius.circular(5),
border: Border.all(color: Color(0xffaaaaaa))),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
child: Center(
child: Text(f.buttonText),
)),
onTap: () {
setState(() {
f.changeButtonColor = !f.changeButtonColor;
});
},
);
}).toList())
第二个:
GridView.count(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 100 / 50,
crossAxisCount: 4,
children: _b
.map(
(MyButtonModal f) => InkWell(
child: Container(
decoration: BoxDecoration(
color: f.changeButtonColor
? Colors.blue
: Colors.white,
borderRadius:
BorderRadius.circular(5),
border: Border.all(
color: Color(0xffaaaaaa))),
padding: EdgeInsets.symmetric(
horizontal: 10, vertical: 5),
child: Center(
child: Text(f.buttonText),
)),
onTap: () {
setState(() {
f.changeButtonColor =
!f.changeButtonColor;
});
},
),
)
.toList())
第一个答案:
您可以像这样更改按钮颜色: 在你的类中声明一个 bool 值:
bool changeColor = false;
FlatButton(
color: changeColor ? Colors.blue: Colors.white,
onPressed: (){
setState(() {
changeColor = !changeColor;
});
}, child: Text('Button Basic'),
)
点击之前:
点击之后:
关于android - 当列表中的按钮时，单击/按下后如何更改按钮背景颜色？ - flutter ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55031431/