在LIstView中使用Tap函数

Question

我正在测试"点击功能";在ListView中的项，但它似乎不起作用。当我点击列表时，打印功能不起作用。

return Scaffold(
appBar: AppBar(
// App Bar
title: Text(
"ListView On-Click Event",
style: TextStyle(color: Colors.grey),
),
elevation: 0,
backgroundColor: Colors.white,
),
// Main List View With Builder
body: ListView.builder(
itemCount: imgList.length,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
print("button pressed");
print(index);
},
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 2.0,
horizontal: 8.0,
),
child: Stack(
children: <Widget>[
cardDesign,
cardImage,
],
),
),
); // gesturedetector
}));

我哪里错了?

Answer 1

尝试使用Column代替Stack

ListView.builder(
shrinkWrap: true,
itemCount: 10,
itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
print("button pressed");
print(index);
},
child: Container(
margin: const EdgeInsets.symmetric(
vertical: 2.0,
horizontal: 8.0,
),
child: Column(
children: <Widget>[
Text(index.toString()),//put your widgets here
],
),
),
); // gesturedetector
}),

Answer 2

你可以在ListView中使用ListTile，因为ListTile有onTap功能，这里也是:

ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: ListTile(
title: Text('TextHere'),
onTap: () {
log('on tap');
},
),
);
});

Answer 3

//你可以这样做

ListView.builder(
itemCount: 5,
scrollDirection: Axis.horizontal,
itemBuilder: (context, int index) {
return VCContainer(
onTap: () {
for (int i = 0; i < 5; i++) {
if (i == index) {
setState(() {
selectedList[i] = true;
});
} else {
setState(() {
selectedList[i] = false;
});
}
}
},
);
},
),

// in VCContainer Class
VCContainer({required this.onTap});

VoidCallback onTap;
Widget build(BuildContext context) {
return 
InkWell(
onTap: onTap,
child: Image.asset(
imageList[index],
width: 60,
height: 60,
),
);
}