如何更改CARD小部件的颜色,如果单击了gridview项之一,则CARD会更改颜色。但您只能选择一项。我该怎么做???
Widget listDenomPulsa(AsyncSnapshot <List<Payload>> snapshot) {
return GridView.builder(
shrinkWrap: false,
scrollDirection: Axis.vertical,
itemCount: snapshot.data.length,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width / (MediaQuery.of(context).size.height / 3),
),
itemBuilder: (BuildContext context, int index) {
bool _selectItem = false;
return GestureDetector(
onTap: () {
setState(() {
_selectItem = true;
});
},
child: Card(
color: _selectItem ? Colors.blue:Colors.amber,
child: Container(
height: SizeConfig.heightMultiplier * 3,
child: Padding(
padding: EdgeInsets.all(SizeConfig.heightMultiplier * 3),
child: Text(
snapshot.data[index].desc,
style: AppTheme.styleSubTitleBlackSmall,
),
),
),
),
);
}
);
}
最佳答案
这将完美地工作,请检查以下代码:
class MyGridView extends StatefulWidget {
@override
_MyGridViewState createState() => _MyGridViewState();
}
class _MyGridViewState extends State<MyGridView> {
// set an int with value -1 since no card has been selected
int selectedCard = -1;
@override
Widget build(BuildContext context) {
return GridView.builder(
shrinkWrap: false,
scrollDirection: Axis.vertical,
itemCount: 10,
gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
childAspectRatio: MediaQuery.of(context).size.width /
(MediaQuery.of(context).size.height / 3),
),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
// ontap of each card, set the defined int to the grid view index
selectedCard = index;
});
},
child: Card(
// check if the index is equal to the selected Card integer
color: selectedCard == index ? Colors.blue : Colors.amber,
child: Container(
height: 200,
width: 200,
child: Center(
child: Text(
'$index',
style: TextStyle(
fontSize: 20,
color: Colors.white,
fontWeight: FontWeight.w500,
),
),
),
),
),
);
});
}
}
输出:
enter image description here
我希望这可以帮助你。
关于flutter - ( flutter )在Grid View Builder中选择对项目有影响吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61586633/