Flutter中如何在TextFormField内添加可点击图标/图片

完全可以实现你要的效果，核心是给TextFormField添加扫码触发图标，点击后调用扫码插件获取条码并填充到输入框里，下面是具体实现步骤和代码示例：

1. 添加扫码依赖 #

在pubspec.yaml中添加常用的条码扫码插件，比如qr_code_scanner：

dependencies:
  flutter:
    sdk: flutter
  qr_code_scanner: ^1.0.1

执行flutter pub get安装依赖。

2. 实现带扫码图标的输入框 #

用StatefulWidget管理输入框的文本状态，在TextFormField的InputDecoration中通过suffixIcon添加扫码图标，点击图标跳转扫码页面：

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

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

  @override
  State<BarcodeInputPage> createState() => _BarcodeInputPageState();
}

class _BarcodeInputPageState extends State<BarcodeInputPage> {
  final TextEditingController _barcodeController = TextEditingController();
  final GlobalKey qrKey = GlobalKey(debugLabel: 'QR');
  QRViewController? _controller;

  // 处理扫码结果
  void _onQRViewCreated(QRViewController controller) {
    _controller = controller;
    controller.scannedDataStream.listen((scanData) {
      setState(() {
        _barcodeController.text = scanData.code ?? '';
      });
      Navigator.pop(context); // 扫码完成后返回输入页面
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('条码输入')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextFormField(
              controller: _barcodeController,
              decoration: InputDecoration(
                labelText: '条码编号',
                border: const OutlineInputBorder(),
                // 右侧添加扫码图标
                suffixIcon: IconButton(
                  icon: const Icon(Icons.qr_code_scanner),
                  onPressed: () {
                    // 打开扫码页面
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => QRView(
                          key: qrKey,
                          onQRViewCreated: _onQRViewCreated,
                        ),
                      ),
                    );
                  },
                ),
              ),
              keyboardType: TextInputType.number,
            ),
            // 其他操作按钮，比如确认按钮
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 处理输入的条码
                if (_barcodeController.text.isNotEmpty) {
                  // 执行后续逻辑，比如查询商品
                }
              },
              child: const Text('确认'),
            )
          ],
        ),
      ),
    );
  }
}

3. 配置权限 #

• Android：在android/app/src/main/AndroidManifest.xml中添加相机权限：

<uses-permission android:name="android.permission.CAMERA" />

• iOS：在ios/Runner/Info.plist中添加相机权限描述：

<key>NSCameraUsageDescription</key>
<string>需要使用相机进行条码扫描</string>

这样就能实现和示例图一致的效果：输入框右侧带扫码图标，点击后打开相机扫码，扫码结果自动填充到输入框中，同时保留手动输入条码的功能。

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