如何在颤振的网格视图列表上赋予 onpress 功能?

Question

我在我的颤振应用程序中有一个网格模型列表视图，我已经为网格视图中存在的每个项目创建了dart文件，但我不知道如何在网格模型列表视图上赋予onpress功能，以便它将我导航到下一页

class GridItem extends StatelessWidget {
GridModel gridModel;
GridItem(this.gridModel);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(1 / 2),
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
gridModel.imagePath,
width: 30,
height: 30,
color: gridModel.color,),
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(gridModel.title, textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),)
,),
],
),
),
),
);
}
}

当我单击列表中的"移动"项目时，它应该将我重定向到我创建的"移动页面"，"航班"和"电影"也是如此

Answer 1

我认为您可以像以下代码一样重定向：-

Widget _buildProductItem(BuildContext context, int index) {
return InkWell(
child: Card(
child: Text(list[index].name,
style: TextStyle(color: Colors.deepPurple))),
onTap: () {
GridModel gridModel = list[index];
//"name" replace to your gridModel Variable.
if(gridModel.name.toString().toLowerCase() == 'mobile'){
//here you can redirect mobile page
} else if(gridModel.name.toString().toLowerCase() == 'flights'){
//here you can redirect flights page
} else if(gridModel.name.toString().toLowerCase() == 'movie'){
//here you can redirect movie page
}
},
);
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemBuilder: _buildProductItem,
itemCount: list.length,
);
}

Answer 2

你不能直接这样做。为此，您必须使用inkwell或GestureDetector，否则您可以选择IconButtons。用 inkwell 或 GestureDetector 包装你的代码，就像这样：

InkWell(
onTap: (){ print("Card Clicked"); }
child: Padding(
padding: const EdgeInsets.all(1 / 2),
child: Container(
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Image.asset(
gridModel.imagePath,
width: 30,
height: 30,
color: gridModel.color,),
Padding(
padding: const EdgeInsets.only(top: 5),
child: Text(gridModel.title, textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),)
,),
],
),
),
),
);
);

希望对您有所帮助！快乐编码：(