qhd-prevention-flutter/lib/customWidget/photo_picker_row.dart

163 lines
4.5 KiB
Dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';
/// 横向一行最多四张图片的添加组件,支持拍照和全屏相册多选
/// 使用示例:
/// PhotoPickerRow(
/// maxCount: 4,
/// onChanged: (List<File> images) {
/// // images 列表更新
/// },
/// ),
class PhotoPickerRow extends StatefulWidget {
final int maxCount;
final ValueChanged<List<File>> onChanged;
const PhotoPickerRow({
Key? key,
this.maxCount = 4,
required this.onChanged,
}) : super(key: key);
@override
_PhotoPickerRowState createState() => _PhotoPickerRowState();
}
class _PhotoPickerRowState extends State<PhotoPickerRow> {
final ImagePicker _picker = ImagePicker();
final List<File> _images = [];
Future<void> _showPickerOptions() async {
showModalBottomSheet(
context: context,
builder: (_) => SafeArea(
child: Wrap(
children: [
ListTile(
leading: const Icon(Icons.camera_alt),
title: const Text('拍照'),
onTap: () {
Navigator.of(context).pop();
_pickCamera();
},
),
ListTile(
leading: const Icon(Icons.photo_library),
title: const Text('从相册选择'),
onTap: () {
Navigator.of(context).pop();
_pickGallery();
},
),
ListTile(
leading: const Icon(Icons.close),
title: const Text('取消'),
onTap: () => Navigator.of(context).pop(),
),
],
),
),
);
}
Future<void> _pickCamera() async {
if (_images.length >= widget.maxCount) return;
final XFile? picked = await _picker.pickImage(source: ImageSource.camera);
if (picked != null) {
setState(() {
_images.add(File(picked.path));
});
widget.onChanged(_images);
}
}
Future<void> _pickGallery() async {
if (_images.length >= widget.maxCount) return;
final remaining = widget.maxCount - _images.length;
final List<AssetEntity>? assets = await AssetPicker.pickAssets(
context,
pickerConfig: AssetPickerConfig(
requestType: RequestType.image,
maxAssets: remaining,
gridCount: 4,
),
);
if (assets != null && assets.isNotEmpty) {
for (final asset in assets) {
if (_images.length >= widget.maxCount) break;
final file = await asset.file;
if (file != null) {
_images.add(file);
}
}
setState(() {});
widget.onChanged(_images);
}
}
void _removeImage(int index) {
setState(() {
_images.removeAt(index);
});
widget.onChanged(_images);
}
@override
Widget build(BuildContext context) {
return SizedBox(
height: 80,
child: ListView.separated(
scrollDirection: Axis.horizontal,
itemCount: _images.length < widget.maxCount
? _images.length + 1
: widget.maxCount,
separatorBuilder: (_, __) => const SizedBox(width: 8),
itemBuilder: (context, index) {
if (index < _images.length) {
// 已选图片
return Stack(
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5),
child: Image.file(
_images[index],
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
Positioned(
top: -6,
right: -6,
child: IconButton(
icon: const Icon(Icons.cancel, size: 20, color: Colors.red),
onPressed: () => _removeImage(index),
),
),
],
);
} else {
// 添加按钮
return GestureDetector(
onTap: _showPickerOptions,
child: Container(
width: 80,
height: 80,
decoration: BoxDecoration(
border: Border.all(color: Colors.grey),
borderRadius: BorderRadius.circular(5),
),
child: const Center(
child: Icon(Icons.camera_alt, color: Colors.grey),
),
),
);
}
},
),
);
}
}