163 lines
4.5 KiB
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),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
);
|
|
}
|
|
}
|