feat(mobile-app): add gallery image selection for QR code scanning
- Add image_picker import for gallery access - Implement _pickImageAndScan() method to select and analyze images - Add "从相册选择" button in QR scanner UI with loading state - Show SnackBar feedback when QR code not found in image 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
681f77fbf7
commit
18ac1f5c43
|
|
@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
|
||||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||||||
import 'package:go_router/go_router.dart';
|
import 'package:go_router/go_router.dart';
|
||||||
|
import 'package:image_picker/image_picker.dart';
|
||||||
import 'package:mobile_scanner/mobile_scanner.dart';
|
import 'package:mobile_scanner/mobile_scanner.dart';
|
||||||
import '../../../../routes/route_paths.dart';
|
import '../../../../routes/route_paths.dart';
|
||||||
import '../providers/auth_provider.dart';
|
import '../providers/auth_provider.dart';
|
||||||
|
|
@ -596,6 +597,7 @@ class _QrScannerPageState extends State<_QrScannerPage> {
|
||||||
MobileScannerController? _controller;
|
MobileScannerController? _controller;
|
||||||
bool _hasScanned = false;
|
bool _hasScanned = false;
|
||||||
bool _torchOn = false;
|
bool _torchOn = false;
|
||||||
|
bool _isProcessingImage = false;
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void initState() {
|
void initState() {
|
||||||
|
|
@ -632,6 +634,84 @@ class _QrScannerPageState extends State<_QrScannerPage> {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/// 从相册选择图片并扫描二维码
|
||||||
|
Future<void> _pickImageAndScan() async {
|
||||||
|
if (_isProcessingImage || _hasScanned) return;
|
||||||
|
|
||||||
|
setState(() {
|
||||||
|
_isProcessingImage = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
final ImagePicker picker = ImagePicker();
|
||||||
|
final XFile? image = await picker.pickImage(source: ImageSource.gallery);
|
||||||
|
|
||||||
|
if (image == null) {
|
||||||
|
setState(() {
|
||||||
|
_isProcessingImage = false;
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 使用 MobileScannerController 分析图片
|
||||||
|
final BarcodeCapture? result = await _controller?.analyzeImage(image.path);
|
||||||
|
|
||||||
|
if (result != null && result.barcodes.isNotEmpty) {
|
||||||
|
for (final barcode in result.barcodes) {
|
||||||
|
if (barcode.rawValue != null && barcode.rawValue!.isNotEmpty) {
|
||||||
|
_hasScanned = true;
|
||||||
|
if (mounted) {
|
||||||
|
Navigator.of(context).pop(barcode.rawValue);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 未识别到二维码
|
||||||
|
if (mounted) {
|
||||||
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
SnackBar(
|
||||||
|
content: Text(
|
||||||
|
'未能识别图片中的二维码,请重新选择',
|
||||||
|
style: TextStyle(fontSize: 14.sp),
|
||||||
|
),
|
||||||
|
backgroundColor: const Color(0xFF6F6354),
|
||||||
|
behavior: SnackBarBehavior.floating,
|
||||||
|
margin: EdgeInsets.all(16.w),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.r),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
debugPrint('扫描图片失败: $e');
|
||||||
|
if (mounted) {
|
||||||
|
ScaffoldMessenger.of(context).showSnackBar(
|
||||||
|
SnackBar(
|
||||||
|
content: Text(
|
||||||
|
'图片扫描失败,请重试',
|
||||||
|
style: TextStyle(fontSize: 14.sp),
|
||||||
|
),
|
||||||
|
backgroundColor: Colors.red,
|
||||||
|
behavior: SnackBarBehavior.floating,
|
||||||
|
margin: EdgeInsets.all(16.w),
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.r),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (mounted) {
|
||||||
|
setState(() {
|
||||||
|
_isProcessingImage = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@override
|
@override
|
||||||
Widget build(BuildContext context) {
|
Widget build(BuildContext context) {
|
||||||
return Scaffold(
|
return Scaffold(
|
||||||
|
|
@ -669,18 +749,66 @@ class _QrScannerPageState extends State<_QrScannerPage> {
|
||||||
),
|
),
|
||||||
// 扫描框遮罩
|
// 扫描框遮罩
|
||||||
_buildScanOverlay(),
|
_buildScanOverlay(),
|
||||||
// 底部提示
|
// 底部区域:提示文字和相册按钮
|
||||||
Positioned(
|
Positioned(
|
||||||
bottom: 100.h,
|
bottom: 60.h,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0,
|
right: 0,
|
||||||
child: Text(
|
child: Column(
|
||||||
'将二维码放入框内,即可自动扫描',
|
children: [
|
||||||
style: TextStyle(
|
Text(
|
||||||
fontSize: 14.sp,
|
'将二维码放入框内,即可自动扫描',
|
||||||
color: Colors.white70,
|
style: TextStyle(
|
||||||
),
|
fontSize: 14.sp,
|
||||||
textAlign: TextAlign.center,
|
color: Colors.white70,
|
||||||
|
),
|
||||||
|
textAlign: TextAlign.center,
|
||||||
|
),
|
||||||
|
SizedBox(height: 32.h),
|
||||||
|
// 相册按钮
|
||||||
|
GestureDetector(
|
||||||
|
onTap: _isProcessingImage ? null : _pickImageAndScan,
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.symmetric(horizontal: 24.w, vertical: 12.h),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white.withValues(alpha: 0.15),
|
||||||
|
borderRadius: BorderRadius.circular(24.r),
|
||||||
|
border: Border.all(
|
||||||
|
color: Colors.white.withValues(alpha: 0.3),
|
||||||
|
width: 1,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: Row(
|
||||||
|
mainAxisSize: MainAxisSize.min,
|
||||||
|
children: [
|
||||||
|
if (_isProcessingImage)
|
||||||
|
SizedBox(
|
||||||
|
width: 18.sp,
|
||||||
|
height: 18.sp,
|
||||||
|
child: const CircularProgressIndicator(
|
||||||
|
strokeWidth: 2,
|
||||||
|
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
else
|
||||||
|
Icon(
|
||||||
|
Icons.photo_library_outlined,
|
||||||
|
size: 18.sp,
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
SizedBox(width: 8.w),
|
||||||
|
Text(
|
||||||
|
_isProcessingImage ? '识别中...' : '从相册选择',
|
||||||
|
style: TextStyle(
|
||||||
|
fontSize: 14.sp,
|
||||||
|
color: Colors.white,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
],
|
],
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue