如何在Flutter布局中为GridView添加导航功能

给Container或者GridListTile添加导航功能的核心逻辑是，在组件外层嵌套支持点击事件的组件（推荐用InkWell，自带Material风格点击水波纹效果），在点击回调中执行路由跳转逻辑即可。

现有代码问题修正 #

你当前给出的代码存在两处问题需要先调整：

• 路由跳转时不应创建新的MaterialApp，需替换为MaterialPageRoute
• StatelessWidget的独立方法无法直接获取上下文context，需要将context作为参数传递到生成列表的方法中

修正后的完整可运行代码如下：

import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        body: Center(child: _buildGrid(context)), // 把context传入网格构建方法
      ),
    );
  }

  // 接收context参数
  Widget _buildGrid(BuildContext context) => GridView.extent(
      maxCrossAxisExtent: 150,
      padding: const EdgeInsets.all(4),
      mainAxisSpacing: 4,
      crossAxisSpacing: 4,
      children: _buildGridTileList(30, context)); // 继续传入context到列表生成方法
      

  List<Widget> _buildGridTileList(int count, BuildContext context) => 
    List.generate(
        count,
        (i) => InkWell(
             onTap: ()=> Navigator.of(context).push(
                 // 替换为MaterialPageRoute实现路由跳转
                 MaterialPageRoute(
                     builder: (context) => 
                         // 这里替换为你要跳转的目标页面，可将下标i作为参数传入
                         TargetPage(index: i)
                 )
             ),
             child: Container(
                 decoration: BoxDecoration(
                     border: Border.all(color: Colors.black)
                 ),
                 child: Image.asset('images/pic$i.jpg'),
             ),
        ),    
    );
}

// 示例目标页面，接收传入的下标参数
class TargetPage extends StatelessWidget {
  final int index;
  const TargetPage({super.key, required this.index});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("第$index个格子的详情页")),
      body: Center(child: Text("当前点击的是第$index个图片"),),
    );
  }
}

适配GridListTile的写法 #

如果要使用GridListTile组件，只需要替换InkWell的child属性即可，示例如下：

InkWell(
  onTap: () => Navigator.of(context).push(MaterialPageRoute(builder: (context) => TargetPage(index: i))),
  child: GridListTile(
    child: Image.asset('images/pic$i.jpg', fit: BoxFit.cover),
    title: Text("第$i个项"),
  ),
)

内容的提问来源于stack exchange，提问作者Mike Osborn