Flutter中通过GridView Builder向新页面传递数据遇阻

1. 确认跳转时的参数传递逻辑 #

确保在GridView.builder的点击事件里，正确将索引通过构造器传递给目标页面：

GestureDetector(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        // 明确传递index参数给目标页面构造器
        builder: (context) => MovieDetailPage(selectedIndex: index),
      ),
    );
  },
  child: // Grid子项内容
)

2. 目标页面正确接收并使用参数 #

在目标页面的构造函数中声明对应参数，确保参数名和传递时一致：

class MovieDetailPage extends StatelessWidget {
  // 声明接收索引的变量，和跳转时的参数名匹配
  final int selectedIndex;

  // 构造器必须标记参数为required，确保参数被初始化
  const MovieDetailPage({super.key, required this.selectedIndex});

  @override
  Widget build(BuildContext context) {
    // 通过索引获取对应movies数据
    final targetMovie = movies[selectedIndex];
    return Scaffold(
      appBar: AppBar(title: Text(targetMovie.title)),
      body: // 页面内容
    );
  }
}

3. 常见错误排查 #

• 参数名拼写不一致：比如跳转时传index，页面接收的是selectedIndex
• 构造器未添加required：导致参数未被正确注入
• 未通过索引获取数据：只接收了索引，但没用来从movies列表中取出对应对象

优化建议 #

相比传递索引，直接传递完整的movie对象更稳妥，避免列表数据变化导致索引失效：

// 跳转时直接传对象
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => MovieDetailPage(movie: movies[index]),
  ),
);

// 目标页面接收对象
class MovieDetailPage extends StatelessWidget {
  final Movie movie;

  const MovieDetailPage({super.key, required this.movie});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(movie.title)),
      body: // 直接使用movie的属性
    );
  }
}

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