feat:增加上传图片组件
This commit is contained in:
@@ -1,32 +1,15 @@
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_form_builder/flutter_form_builder.dart';
|
||||
import 'package:food_hub_app/widgets/common/index.dart';
|
||||
import 'package:form_builder_validators/form_builder_validators.dart';
|
||||
import 'package:image_picker/image_picker.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
|
||||
class RecordFormPage extends StatefulWidget {
|
||||
const RecordFormPage({super.key});
|
||||
|
||||
// @override
|
||||
// Widget build(BuildContext context) {
|
||||
// return Scaffold(
|
||||
// appBar: AppBar(title: Text('新页面'), backgroundColor: Colors.white),
|
||||
// backgroundColor: Color(0xFFF5F5F5),
|
||||
// body: Center(
|
||||
// child: Column(
|
||||
// mainAxisAlignment: MainAxisAlignment.center,
|
||||
// children: [
|
||||
// Text('这是新页面'),
|
||||
// ElevatedButton(
|
||||
// onPressed: () => Navigator.pop(context),
|
||||
// child: Text('返回'),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
// ),
|
||||
// );
|
||||
// }
|
||||
|
||||
@override
|
||||
State<RecordFormPage> createState() => _RecordFormPage();
|
||||
}
|
||||
@@ -34,6 +17,27 @@ class RecordFormPage extends StatefulWidget {
|
||||
class _RecordFormPage extends State<RecordFormPage> {
|
||||
final _formKey = GlobalKey<FormBuilderState>();
|
||||
|
||||
final ImagePicker _picker = ImagePicker();
|
||||
XFile? _selectedImage;
|
||||
|
||||
// 选择图片的方法
|
||||
Future<void> _pickImage(ImageSource source) async {
|
||||
try {
|
||||
final XFile? image = await _picker.pickImage(source: source);
|
||||
if (image != null) {
|
||||
setState(() {
|
||||
_selectedImage = image;
|
||||
// 更新表单字段的值
|
||||
_formKey.currentState?.fields['image']?.didChange(image.path);
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
ScaffoldMessenger.of(
|
||||
context,
|
||||
).showSnackBar(SnackBar(content: Text('选择图片失败: $e')));
|
||||
}
|
||||
}
|
||||
|
||||
void confirmClick(BuildContext context) {
|
||||
if (_formKey.currentState?.saveAndValidate() ?? false) {
|
||||
showSuccessToast("新增记录成功");
|
||||
@@ -42,6 +46,87 @@ class _RecordFormPage extends State<RecordFormPage> {
|
||||
}
|
||||
}
|
||||
|
||||
// 显示图片操作弹窗（查看/删除）
|
||||
Future<void> _showImageActionDialog(BuildContext context) async {
|
||||
await showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('图片操作'),
|
||||
actions: [
|
||||
// 查看图片
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
_previewImage(context);
|
||||
},
|
||||
child: const Text('查看'),
|
||||
),
|
||||
// 删除图片
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_selectedImage = null; // 清空选中的图片
|
||||
});
|
||||
Navigator.pop(context);
|
||||
},
|
||||
child: const Text(
|
||||
'删除',
|
||||
style: TextStyle(color: Colors.red),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 显示选择图片来源的弹窗（相册/相机）
|
||||
Future<void> _showImageSourceDialog(BuildContext context) async {
|
||||
await showDialog(
|
||||
context: context,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('选择图片来源'),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
_pickImage(ImageSource.gallery);
|
||||
},
|
||||
child: const Text('相册'),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () {
|
||||
Navigator.pop(context);
|
||||
_pickImage(ImageSource.camera);
|
||||
},
|
||||
child: const Text('相机'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// 预览图片（全屏查看）
|
||||
void _previewImage(BuildContext context) {
|
||||
Navigator.push(
|
||||
context,
|
||||
MaterialPageRoute(
|
||||
builder: (context) => Scaffold(
|
||||
backgroundColor: Colors.black,
|
||||
body: Center(
|
||||
child: Image.file(
|
||||
File(_selectedImage!.path),
|
||||
fit: BoxFit.contain,
|
||||
),
|
||||
),
|
||||
floatingActionButton: IconButton(
|
||||
icon: const Icon(Icons.close, color: Colors.white),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
@@ -59,7 +144,7 @@ class _RecordFormPage extends State<RecordFormPage> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
formLabelText(labelText: '菜谱名称'),
|
||||
formLabelText(labelText: '菜谱名称', isRequired: true),
|
||||
const SizedBox(height: 5),
|
||||
FormBuilderTextField(
|
||||
name: 'name',
|
||||
@@ -73,7 +158,7 @@ class _RecordFormPage extends State<RecordFormPage> {
|
||||
keyboardType: TextInputType.name,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
formLabelText(labelText: '完成时间'),
|
||||
formLabelText(labelText: '完成时间', isRequired: true),
|
||||
const SizedBox(height: 5),
|
||||
FormBuilderDateTimePicker(
|
||||
name: 'date',
|
||||
@@ -87,6 +172,69 @@ class _RecordFormPage extends State<RecordFormPage> {
|
||||
format: DateFormat('yyyy-MM-dd'),
|
||||
// enabled: _formKey.currentState?.fields['date']?.enabled ?? true,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
formLabelText(labelText: '美食图片'),
|
||||
const SizedBox(height: 5),
|
||||
|
||||
// 图片选择区域（核心优化部分）
|
||||
GestureDetector(
|
||||
onTap: () {
|
||||
// 已选择图片时，显示操作弹窗；未选择时直接打开选择器
|
||||
if (_selectedImage != null) {
|
||||
_showImageActionDialog(context);
|
||||
} else {
|
||||
_showImageSourceDialog(context); // 弹出选择相册/相机的对话框
|
||||
}
|
||||
},
|
||||
child: Container(
|
||||
height: 200,
|
||||
width: 200,
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(8),
|
||||
border: Border.all(
|
||||
color: Colors.grey[300]!,
|
||||
width: 1,
|
||||
style: BorderStyle.solid,
|
||||
),
|
||||
// 有图片时显示图片，无图片时显示背景色
|
||||
color:
|
||||
_selectedImage == null ? Colors.grey[50] : null,
|
||||
image:
|
||||
_selectedImage != null
|
||||
? DecorationImage(
|
||||
image: FileImage(
|
||||
File(_selectedImage!.path),
|
||||
),
|
||||
fit: BoxFit.contain,
|
||||
)
|
||||
: null,
|
||||
),
|
||||
// 初始状态显示+号；有图片时隐藏
|
||||
child:
|
||||
_selectedImage == null
|
||||
? Center(
|
||||
child: Icon(
|
||||
Icons.add,
|
||||
color: Colors.grey[400],
|
||||
size: 48, // 大号+号，视觉更清晰
|
||||
),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
),
|
||||
|
||||
// 隐藏的表单字段（保留原功能）
|
||||
FormBuilderTextField(
|
||||
name: 'image',
|
||||
initialValue: _selectedImage?.path ?? '',
|
||||
enabled: false,
|
||||
validator: (value) {
|
||||
if (value == null || value.isEmpty) {
|
||||
return '请选择一张图片';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
Reference in New Issue
Block a user