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

Question

我想为导航器推送 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]}",
                 
                )
         ],), );}, ),  ), ),); } }

Answer 1

用手势检测器包裹你的卡片并使用它的 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 代替 gestureDetector，它是相同的，但具有涟漪效应。

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

Flutter: how to set clickable systems in each index at GridView.builder with Navigator.push in Flutter

gridview

builder

button

dart

flutter