如何在列表视图中添加点击功能.施工项目吗?

Question

你能告诉我如何将tapfunction添加到listview生成器项吗?

我想在点击项目时跳转到一个新屏幕。

我创建了两个屏幕，标准和vip，并将它们添加到main.dart用于路由。

谢谢你的帮助

Widget build(BuildContext context) {
return Container(
height: 350,
child: ListView.builder(
scrollDirection: Axis.horizontal,
padding: EdgeInsets.only(left: 16, right: 6),
itemCount: ultraComputers().length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.only(right: 15),
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(ultraComputers()[index].image),
),
),
child: Stack(
children: [
Positioned(
top: 300,
left: 16,
child: Text(
ultraComputers()[index].description,
style: GoogleFonts.jura(
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 40),
),
),
),
Positioned(
top: 15,
left: 20,
child: Text(
ultraComputers()[index].city,
style: GoogleFonts.jura(
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25),
),
),
}

Answer 1

添加"点击功能";对于ListView中的项目，我建议用GestureDetectorWidget包装项目Widget，允许您添加"onTap"属性:

itemBuilder: (context, index) {
return GestureDetector(
onTap: () {
...function here...
},
child: Container(
margin: EdgeInsets.only(right: 15),
width: 350,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: AssetImage(ultraComputers()[index].image),
),
),
child: Stack(
children: [
Positioned(
top: 300,
left: 16,
child: Text(
ultraComputers()[index].description,
style: GoogleFonts.jura(
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 40),
),
),
),
Positioned(
top: 15,
left: 20,
child: Text(
ultraComputers()[index].city,
style: GoogleFonts.jura(
textStyle: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25),
),
),
),
],
),
),
);
}

我希望这能帮助你解决你的问题!

Answer 2

您可以在listview中包装返回的小部件。使用GestureDetector小部件构建器，并实现onTap属性

Answer 3

还有另一种方法可以帮助。您可以使用分隔列表视图，此列表将返回列表平铺。和列表平铺有点击功能。

https://api.flutter.dev/flutter/widgets/ListView/ListView.separated.html