如何在Flutter中实现Scanner变量更新时同步更新Scanner_frame的Overlay值？

当前代码的问题 #

1. 用全局变量QR、静态变量content_QR传递数据，Flutter不会自动监听这类变量变化，无法触发UI更新。
2. Scanner_frame().scanner_var = "testi test"是创建了新的Scanner_frame实例，并非当前屏幕上显示的实例，所以根本不会更新界面。

修复方案：通过回调实现子父组件数据传递 #

核心思路是让Scanner把扫描到的内容通过回调传给Scanner_frame，Scanner_frame收到数据后调用setState触发UI更新。

1. 修改qrscanner.dart，添加回调参数

import 'package:flutter/material.dart';
import 'package:mobile_scanner/mobile_scanner.dart';

class Scanner extends StatelessWidget {
  final ValueChanged<String> onQrDetected; // 添加回调参数

  const Scanner({Key? key, required this.onQrDetected}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('QR-Code-Scanner')),
      body: MobileScanner(
          allowDuplicates: false,
          controller: MobileScannerController(
              facing: CameraFacing.back, torchEnabled: true),
          onDetect: (barcode, args) {
            if (barcode.rawValue == null) {
              debugPrint('Failed to scan Barcode');
            } else {
              final String code = barcode.rawValue!;
              debugPrint('Barcode found! $code');
              onQrDetected(code); // 调用回调传递扫描结果
            }
          }),
    );
  }
}

2. 修改qrscanner_frame.dart，接收回调并更新UI

import 'package:flutter/material.dart';
import 'package:qr_scanner/sides/qrscanner.dart';

class Scanner_frame extends StatefulWidget {
  final String title = "Text";

  @override
  _Scanner_frameState createState() => _Scanner_frameState();
}

class _Scanner_frameState extends State<Scanner_frame> {
  var _selectedIndex = 0;
  String qrContent = "~"; // 存储扫描到的QR内容

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Center(
          child: Column(
            children: [
              Container(
                height: 1000.0,
                child: Stack(
                  children: [
                    Align(
                      alignment: AlignmentDirectional(1, 1),
                      // 传入回调，收到扫描结果后更新状态
                      child: Scanner(onQrDetected: (code) {
                        setState(() {
                          qrContent = code;
                        });
                      }),
                    ),
                    Align(
                      alignment: AlignmentDirectional(-0.07, 0.55),
                      child: Text(
                        qrContent, // 直接显示维护的变量
                        style: TextStyle(
                          fontSize: 25,
                          color: Colors.white,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

原理说明 #

• Scanner作为子组件，通过onQrDetected回调把扫描到的QR码内容传递给父组件Scanner_frame。
• Scanner_frame的State类中调用setState，会触发Widget重建，从而更新Text组件显示的内容，实现数据同步。

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