.NET MAUI 7中TabbedPage集成ZXing.Net.Maui扫码组件异常问题

问题根源 #

1. 重复调用InitializeComponent()：在OnAppearing中调用该方法会重新加载XAML，导致页面控件被重新实例化，扫码回调中更新的是旧控件实例，因此Label无法正常更新。
2. 未正确管理扫码器生命周期：页面切换时未释放相机资源，导致返回后相机无法重新启动，仅显示黑色矩形。

修复步骤 #

1. 移除OnAppearing中的InitializeComponent()

InitializeComponent()仅需在页面构造函数中调用一次，多次调用会重置页面控件状态。

2. 初始化扫码选项到构造函数

将扫码配置逻辑移至页面构造函数，避免重复创建配置对象：

public QrPage()
{
    InitializeComponent();
    
    // 一次性初始化扫码选项
    cameraBarcodeReaderView.Options = new BarcodeReaderOptions
    {
        Formats = BarcodeFormats.OneDimensional,
        AutoRotate = true,
        Multiple = false
    };
}

3. 管理扫码器的页面生命周期

在OnAppearing中启动相机和检测，OnDisappearing中停止检测并释放相机资源：

protected override void OnAppearing()
{
    base.OnAppearing();
    
    // 启动相机预览并开启扫码检测
    cameraBarcodeReaderView.IsDetecting = true;
    _ = cameraBarcodeReaderView.StartCameraAsync();
}

protected override void OnDisappearing()
{
    base.OnDisappearing();
    
    // 停止扫码检测并关闭相机预览
    cameraBarcodeReaderView.IsDetecting = false;
    _ = cameraBarcodeReaderView.StopCameraAsync();
}

4. 保留扫码回调逻辑（无需修改）

原回调中的Dispatcher操作是正确的，确保UI更新在主线程执行：

protected void cameraBarcodeReaderView_BarcodesDetected(object sender, BarcodeDetectionEventArgs e)
{
    Dispatcher.Dispatch(() =>
    {
        qrlabel.Text = $"{e.Results[0].Format} -> {e.Results[0].Value}";
        cameraBarcodeReaderView.IsDetecting = false; // 如需持续扫码可移除该行
    });
}

额外注意事项 #

• 确保已在平台配置文件中添加相机权限：
  • Android：在AndroidManifest.xml中添加<uses-permission android:name="android.permission.CAMERA" />
  • iOS：在Info.plist中添加NSCameraUsageDescription说明相机使用用途

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