Flutter GridView点击项跳转对应命名路由问题求助

需要实现网格布局的每个项点击后跳转到各自对应的命名路由（如aa、bb、cc），但当前所有项点击后都只会跳转到同一个aa路由，如何解决？

现有代码： #

Items列表：

List Fin = [
["aa", "Resources/Images/test/aa.png"],
["bb", "Resources/Images/test/bb.png"],
["cc", "Resources/Images/test/cc.png"],];

GridView代码：

GridView.builder(
        physics: const ScrollPhysics(),
        shrinkWrap: true,
        itemCount: Fin.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10),
        itemBuilder: (context, index) {
          return Test(
            title: Fin[index][0],
            icon: Fin[index][1],
          );
        },
      ),

Test类代码：

return InkWell(
  onTap: () {
    Navigator.pushNamed(context, Routes.aa);
  },
  child: Container(
    decoration: BoxDecoration(
      color: Colors.green,
      borderRadius: BorderRadius.circular(20),
    ),
  ),
);

解决方案： #

核心思路是把每个网格项对应的路由名称传递给Test组件，让组件根据传入的路由名执行跳转，而非写死固定路由。

1. 修改Test类，新增路由名称参数
   给Test类添加routeName参数，在onTap回调中使用该参数完成跳转：

class Test extends StatelessWidget {
  final String title;
  final String icon;
  final String routeName;

  const Test({
    super.key,
    required this.title,
    required this.icon,
    required this.routeName,
  });

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {
        Navigator.pushNamed(context, routeName);
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset(icon),
            Text(title),
          ],
        ),
      ),
    );
  }
}

2. 在GridView中传递对应路由名
   在itemBuilder中，根据当前项的标识匹配对应的路由路径，传递给Test组件：

GridView.builder(
        physics: const ScrollPhysics(),
        shrinkWrap: true,
        itemCount: Fin.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, crossAxisSpacing: 10, mainAxisSpacing: 10),
        itemBuilder: (context, index) {
          String routePath;
          switch(Fin[index][0]){
            case 'aa':
              routePath = Routes.aa;
              break;
            case 'bb':
              routePath = Routes.bb;
              break;
            case 'cc':
              routePath = Routes.cc;
              break;
            default:
              routePath = '/'; // 默认路由
          }
          return Test(
            title: Fin[index][0],
            icon: Fin[index][1],
            routeName: routePath,
          );
        },
      ),

3. 确保Routes类与路由注册正确
   确认Routes类已声明对应路由，并在MaterialApp中完成注册：

// Routes类定义
class Routes {
  static const String aa = '/aa';
  static const String bb = '/bb';
  static const String cc = '/cc';
}

// MaterialApp路由注册
MaterialApp(
  initialRoute: '/',
  routes: {
    Routes.aa: (context) => const AAScreen(),
    Routes.bb: (context) => const BBScreen(),
    Routes.cc: (context) => const CCScreen(),
  },
);

完成以上修改后，每个网格项点击时会跳转到各自对应的命名路由。

内容的提问来源于stack exchange，提问作者Abu Bakar