Flutter中QRView相机需点击容器才启动，如何实现页面渲染即启动？

核心解决方案 #

1. 主动触发相机启动 #

部分版本的QRView组件不会自动启动相机，需要在_onQRViewCreated回调里手动调用启动方法。修改你的回调函数：

void _onQRViewCreated(QRViewController controller) {
  this.controller = controller;
  // 主动启动相机
  controller.startCamera();
  controller.scannedDataStream.listen((scanData) {
    setState(() {
      result = scanData;
    });
  });
}

2. 提前获取相机权限 #

如果相机权限未授予，QRView可能会等待用户交互后才发起权限请求，导致相机延迟启动。可以在页面初始化时提前申请权限：

首先在pubspec.yaml添加权限依赖：

dependencies:
  permission_handler: ^10.2.0

然后在页面的initState中请求权限：

@override
void initState() {
  super.initState();
  _requestCameraPermission();
}

Future<void> _requestCameraPermission() async {
  final status = await Permission.camera.request();
  if (status.isDenied) {
    // 权限拒绝时提示用户
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(content: Text('需要相机权限才能扫描二维码')),
    );
  }
}

3. 检查组件配置参数 #

如果使用的QRView封装带有autoStart参数，直接设置为true即可自动启动：

QRView(
  key: qrKey,
  onQRViewCreated: _onQRViewCreated,
  autoStart: true, // 开启自动启动
)

完整示例代码 #

import 'package:flutter/material.dart';
import 'package:qr_flutter/qr_flutter.dart';
import 'package:permission_handler/permission_handler.dart';

class QRScannerPage extends StatefulWidget {
  const QRScannerPage({super.key});

  @override
  State<QRScannerPage> createState() => _QRScannerPageState();
}

class _QRScannerPageState extends State<QRScannerPage> {
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? controller;
  dynamic result;

  @override
  void initState() {
    super.initState();
    _requestCameraPermission();
  }

  Future<void> _requestCameraPermission() async {
    final status = await Permission.camera.request();
    if (status.isDenied) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('需要相机权限才能扫描二维码')),
      );
    }
  }

  void _onQRViewCreated(QRViewController controller) {
    this.controller = controller;
    controller.startCamera();
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        result = scanData;
      });
    });
  }

  @override
  void dispose() {
    controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: MediaQuery.of(context).size.width / 1.6,
          width: MediaQuery.of(context).size.width / 1.6,
          color: Colors.pink,
          child: QRView(
            key: qrKey,
            onQRViewCreated: _onQRViewCreated,
          ),
        ),
      ),
    );
  }
}

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