Flutter中QR Code Scanner插件无法打开扫码视图问题排查

• 没有触发页面导航逻辑
  直接调用QRViewExample()只是创建了一个Widget实例，并没有将它推入应用的导航栈，自然不会有页面跳转的效果。你需要在onTap回调里使用导航器来跳转页面：

  onTap: () {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => QRViewExample()),
    );
  }
  

• InkWell的点击区域失效
  有可能InkWell的点击区域没有覆盖到图片，比如图片使用了fit: BoxFit.contain导致周围有空隙，或者InkWell本身没有足够的尺寸。可以给InkWell包裹一个SizedBox来明确点击区域，或者检查是否有上层组件（比如透明的Container、GestureDetector）拦截了点击事件：

  InkWell(
    onTap: () { /* 导航逻辑 */ },
    child: SizedBox(
      width: 60,
      height: 60,
      child: Image.asset('assets/qr_scan_icon.png'),
    ),
  )
  

• Context无法获取导航器
  如果你的InkWell所在的Widget没有处于MaterialApp或Navigator的上下文范围内，Navigator.of(context)会找不到导航器。可以通过以下方式解决：

  1. 确保当前Widget是在MaterialApp的子树中
  2. 使用GlobalKey来获取导航器状态：

     final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
     
     // 在MaterialApp中设置navigatorKey
     MaterialApp(
       navigatorKey: navigatorKey,
       // ...其他配置
     )
     
     // 在onTap中使用
     onTap: () {
       navigatorKey.currentState?.push(
         MaterialPageRoute(builder: (_) => QRViewExample()),
       );
     }
     

• 扫码页面初始化失败（无日志输出）
  qr_code_scanner需要相机权限才能正常工作，如果没有配置权限或未请求权限，QRView会初始化失败，但可能不会输出明显日志。

  • Android：在android/app/src/main/AndroidManifest.xml中添加相机权限：

    <uses-permission android:name="android.permission.CAMERA" />
    

  • iOS：在ios/Runner/Info.plist中添加相机权限描述：

    <key>NSCameraUsageDescription</key>
    <string>需要相机权限来扫描二维码</string>
    

  同时在QRViewExample中提前请求相机权限，比如使用permission_handler插件检查权限状态。

• onTap回调绑定错误
  检查你的onTap是否正确绑定，比如是否写成了onTap: QRViewExample()（这会在Widget构建时就调用，而不是点击时），正确的写法应该是onTap: () { /* 你的导航逻辑 */ }。

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