Flutter PDA 扫描仪（手持式激光扫描仪）

Question

我正在尝试在 Zebra 手持设备中使用 flutter_barcode_listener。当我尝试扫描条形码时，它会打印一个空字符串，我也尝试了 RawKeyboardListener，但它也返回空字符串。对我有用的唯一方法是使用文本字段，但键盘出现了，这会给我的应用程序带来问题。我还尝试了 Input_With_Keyboard_Controller 包来隐藏按键，但它需要集中注意力。 有没有办法运行 flutter_barcode_listener 包并修复空字符串问题？ 或者在使用套件之前我应该在手持机中进行任何配置吗？

这是我使用 flutter_barcode_listener 包的代码：

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_barcode_listener/flutter_barcode_listener.dart';
import 'package:visibility_detector/visibility_detector.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  String? _barcode;
  late bool visible;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Add visiblity detector to handle barcode
        // values only when widget is visible
        child: VisibilityDetector(
          onVisibilityChanged: (VisibilityInfo info) {
            visible = info.visibleFraction > 0;
          },
          key: Key('visible-detector-key'),
          child: BarcodeKeyboardListener(
            bufferDuration: Duration(milliseconds: 200),
            onBarcodeScanned: (barcode) {
              if (!visible) return;
              print(barcode);
              setState(() {
                _barcode = barcode;
              });
            },
            useKeyDownEvent: Platform.isWindows,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Text(
                  _barcode == null ? 'SCAN BARCODE' : 'BARCODE: $_barcode',
                  style: Theme.of(context).textTheme.headlineSmall,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

这是我尝试使用 RawKeyboardListener 的代码：

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

class MyWidget extends StatefulWidget {
  const MyWidget({Key? key}) : super(key: key);

  @override
  State<MyWidget> createState() => MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final FocusNode _focusNode = FocusNode();

  String _chars = '';

  String? barcode;

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    FocusScope.of(context).requestFocus(_focusNode);
    return Container(
      color: Colors.white,
      alignment: Alignment.center,
      child: RawKeyboardListener(
        focusNode: _focusNode,
        onKey: (RawKeyEvent event) {
          if (event is RawKeyDownEvent) {
            print(_chars);
            print(event.physicalKey);
            if (event.physicalKey == PhysicalKeyboardKey.gameButtonRight1) {
              _chars += event.data.keyLabel;
              print(event.data);
              setState(() {
                barcode = _chars;
                _chars = '';
              });
            } else {
              _chars += event.data.keyLabel;
            }
          }
        },
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Barcode: $barcode',
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

我对 flutter 还很陌生，但这里有一些正在工作的代码（相同的上下文：使用来自 zebra 设备的扫描）来保持焦点（使用 Riverpod 和 flutter_hooks 包）。我希望它有帮助。

我没有解决的问题是你一直显示键盘，而我希望键盘不显示...如果有人有想法：

条形码扫描仪：

class BarcodeScanner extends HookConsumerWidget {
  const BarcodeScanner({
    super.key,
    required this.onBarcodeScanned,
  });

  final ValueChanged<String> onBarcodeScanned;

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final visible = useState<bool>(true);

    final controller = useTextEditingController();
    final focusNode = useFocusNode(canRequestFocus: true);

    useEffect(() {
      focusNode.addListener(() => _requestFocus(context, focusNode));
      return () => focusNode.removeListener(() => _requestFocus(context, focusNode));
    }, [focusNode]);

    return VisibilityDetector(
      key: const Key('visible-detector-key'),
      onVisibilityChanged: (info) {
        if (!context.mounted) return;
        visible.value = info.visibleFraction > 0;
      },
      child: BarcodeKeyboardListener(
        bufferDuration: const Duration(milliseconds: 200),
        onBarcodeScanned: (_) {
          if (!visible.value) return;
          onBarcodeScanned(controller.text);
          controller.text = '';
        },
        child: Visibility(
          visible: true,
          maintainState: true,
          maintainSemantics: true,
          maintainSize: true,
          maintainAnimation: true,
          child: TextField(
            autofocus: true,
            controller: controller,
            focusNode: focusNode,
          ),
        ),
      ),
    );
  }

  _requestFocus(BuildContext context, FocusNode focusNode) {
    if (!focusNode.hasFocus) {
      FocusScope.of(context).requestFocus(focusNode);
    }
  }
}

显示条形码的页面：

@override
  Widget build(BuildContext context, WidgetRef ref) {
    return SmaScaffold(
      title: context.i18n.menuPreReceptionDeliver,
      child: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(top: 500),
            child: Column(
              children: <Widget>[
                BarcodeScanner(
                  onBarcodeScanned: (value) async {
                    ref.read(parcelsScanProvider.notifier).fetch(value);
                  },
                ),
                const SizedBox(height: 50),
                Consumer(
                  builder: (context, ref, child) {
                    final codes = ref.watch(parcelsProvider);
                    return BarCodesList(codes: codes);
                  },
                ),
                SizedBox(height: MediaQuery.of(context).viewInsets.bottom),
              ],
            ),
          ),
        ),
      ),
    );