Flutter中GestureDetector的onTap事件报错无法跳转页面求助

核心问题分析 #

你的代码里存在几个明确错误，导致点击事件无法正常触发页面跳转：

1. onTap中同时调用三次导航跳转
   你的onTap回调里连续执行了Navigator.push、Navigator.pushNamed、Navigator.push三个跳转操作，这会导致导航栈逻辑混乱，多个跳转请求互相冲突，根本无法完成正常的页面跳转。必须只保留一个正确的跳转语句。

2. pushNamed路由未注册（若使用该方法）
   若使用Navigator.pushNamed(context, '/about')或pushNamed('AboutUsScreen')，必须在MaterialApp的routes参数中提前注册对应的路由映射，示例：

   MaterialApp(
     initialRoute: '/',
     routes: {
       '/': (context) => HomeScreen(), // 你的首页组件
       '/about': (context) => AboutUsScreen(), // 注册/about路由
       // 'AboutUsScreen': (context) => AboutUsScreen(), // 或者注册该名称的路由
     },
   );
   

   未注册的路由名称会直接导致pushNamed失效。

3. 页面类拼写错误或未定义
   代码中出现了AboutUsScreen1111111这个类名，若该类未在项目中定义，会直接引发错误，导致跳转失败。确保跳转的页面类名称正确且已实现。

修正后的示例代码 #

将onTap回调简化为单个正确的跳转语句，比如保留MaterialPageRoute的方式：

GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () {
    // 只保留一个跳转操作，这里用MaterialPageRoute示例
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => AboutUsScreen()),
    );
  },
  child: const Card(
    elevation: 10,
    color: Colors.blueAccent,
    child: Padding(
      padding: EdgeInsets.all(5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: [
          Icon(Icons.document_scanner, fill: BorderSide.strokeAlignCenter),
          Text(
            "AboutUS",
            textAlign: TextAlign.center,
            style: TextStyle(
              color: Colors.white,
              fontSize: 28,
            ),
          ),
        ],
      ),
    ),
  ),
)

额外检查点 #

• 确保AboutUsScreen类已正确定义，没有语法错误。
• 确认当前context是包含在MaterialApp或Navigator组件树中的有效上下文，避免使用脱离导航树的context。

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