Question

我在flutter应用程序中有一个gridmodel列表视图，我已经为gridview中存在的每个项目创建了dart文件，但是我不知道如何在gridmodel列表视图中提供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

您不能直接这样做。为此，您将必须使用墨水瓶或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),)
    ,),

 ],
),
),
),
);
);

希望有帮助！编码愉快：）

如何在flift的gridview列表上赋予onpress功能？

2 个答案: