Flutter项目使用qr_code_scanner包出现屏幕上下区域缩小问题求助

问题描述 #

我正在开发一个基于Flutter的二维码扫描项目，使用qr_code_scanner包。起初屏幕显示尺寸正常，但现在在我的手机上运行时，屏幕顶部和底部区域出现缩小情况。有趣的是，该项目在小屏手机及模拟器上显示正常，仅我的手机存在此问题。

排查与解决方法 #

• 检查设备显示设置
  部分大屏高分辨率手机可能开启了「显示缩放」或「自定义屏幕分辨率」功能，导致应用界面被系统强制压缩。进入手机设置-显示-屏幕分辨率/显示缩放，切换为默认标准模式后重新运行应用。

• 动态适配扫描控件尺寸
  默认的QRView可能未适配大屏布局，通过MediaQuery获取屏幕真实尺寸，动态设置扫描框和控件大小：

  QRView(
    key: qrKey,
    onQRViewCreated: _onQRViewCreated,
    overlay: QrScannerOverlayShape(
      borderColor: Colors.red,
      borderRadius: 10,
      borderLength: 30,
      borderWidth: 10,
      // 扫描框占屏幕宽度的80%，适配不同尺寸屏幕
      cutOutSize: MediaQuery.of(context).size.width * 0.8,
    ),
  )
  

  同时给QRView外层包裹Expanded或设置宽高为double.infinity，确保控件填充父布局。

• 配置AndroidManifest.xml适配大屏
  在Android项目的AndroidManifest.xml中添加屏幕宽高比限制标签，避免系统自动缩放应用：

  <meta-data
      android:name="android.max_aspect"
      android:value="2.1" />
  

• 更新qr_code_scanner包
  旧版本包可能存在大屏适配bug，执行命令更新到最新稳定版：

  flutter pub upgrade qr_code_scanner
  

• 测试全屏布局
  移除扫描页面的AppBar、底部导航等冗余控件，将QRView放在全屏容器中：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: double.infinity,
        height: double.infinity,
        child: QRView(
          key: qrKey,
          onQRViewCreated: _onQRViewCreated,
        ),
      ),
    );
  }
  

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