Flutter：如何在Flutter中使用Navigator.push在GridView.builder的每个索引中设置可点击系统

问题描述

我想为GridView构建器的索引中的导航器推入设置可点击的系统。但是我找不到方法，因为我是新手。请帮我。这里是所有源代码。

 class category_route extends StatelessWidget {

 @override
 Widget build(BuildContext context) {

return MaterialApp(
  home: Scaffold(
    
    body: Container(

      child: GridView.builder(

        itemCount: categoryTitleArray.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,crossAxisspacing: 5,mainAxisspacing: 5,childAspectRatio: (itemWidth / itemHeight),),itemBuilder: (BuildContext context,int index) {

          return new Card(
            elevation: 0,color: Colors.transparent,child: new Column(

              children: [

                Expanded(

                  child: Container(
                    
                    child: Image.asset(
                      categoryImageArray[index],fit: BoxFit.contain,Text(
                  "${categoryTitleArray[index]}",)
         ],);},); } }

解决方法

用手势检测器包装您的Card并使用其onTap属性

       class category_route extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          child: GridView.builder(
            itemCount: categoryTitleArray.length,gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: (orientation == Orientation.portrait) ? 3 : 4,crossAxisSpacing: 5,mainAxisSpacing: 5,childAspectRatio: (itemWidth / itemHeight),),itemBuilder: (BuildContext context,int index) {
              return GestureDetector(
                onTap: (){//navigator push here}
                child: new Card(
                elevation: 0,color: Colors.transparent,child: new Column(
                  children: [
                    Expanded(
                      child: Container(
                        child: Image.asset(
                          categoryImageArray[index],fit: BoxFit.contain,Text(
                      "${categoryTitleArray[index]}",)
                  ],);
              )
            },);
  }
}

您还可以使用InkWell代替相同的手势动作，但具有波纹效果。