import 'dart:async'; 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:image_picker/image_picker.dart'; import 'package:tdesign_flutter/tdesign_flutter.dart'; class RecordFormPage extends StatefulWidget { const RecordFormPage({super.key}); @override State createState() => _RecordFormPage(); } class _RecordFormPage extends State { final _formKey = GlobalKey(); List _controller = []; FormController _formController = FormController(); String _selected_1 = ''; String _selected_2 = ''; String? _initLocalData; final ImagePicker _picker = ImagePicker(); XFile? _selectedImage; /// 整个表单存放的数据 Map _formData = { "name": '', "date": '', "gender": '', "birth": '', "place": '', "age": "2", "description": "2", "resume": '', "photo": '', }; Map _formItemNotifier = { "name": '', "password": '', "gender": '', "birth": '', "place": '', "age": '2', "description": '', "resume": '', "photo": "", }; /// 定义整个校验规则 final Map _validationRules = { 'name': TDFormValidation( validate: (value) => value == null || value.isEmpty ? 'empty' : null, errorMessage: '输入不能为空', type: TDFormItemType.input, ), "birth": TDFormValidation( validate: (value) => value == null || value.isEmpty ? 'empty' : null, errorMessage: '不能为空', type: TDFormItemType.dateTimePicker, ), "photo": TDFormValidation( validate: (value) => value == null || value.isEmpty ? 'empty' : null, errorMessage: '不能为空', type: TDFormItemType.upLoadImg, ), }; void confirmClick(BuildContext context) { if (_formKey.currentState?.saveAndValidate() ?? false) { // showSuccessToast("新增记录成功"); } else { // showErrorToast("请先提交信息"); } } List files = []; List _onValueChanged( List fileList, List value, TDUploadType event, ) { switch (event) { case TDUploadType.add: fileList.addAll(value); break; case TDUploadType.remove: fileList.removeWhere((element) => element.key == value[0].key); break; case TDUploadType.replace: final firstReplaceFile = value.first; final index = fileList.indexWhere( (file) => file.key == firstReplaceFile.key, ); if (index != -1) { fileList[index] = firstReplaceFile; } break; } return fileList; } @override void initState() { /// 三个文本型的表格单元 for (var i = 0; i < 4; i++) { _controller.add(TextEditingController()); } _formData.forEach((key, value) { _formItemNotifier[key] = FormItemNotifier(); }); super.initState(); } @override void dispose() { // TODO: implement dispose super.dispose(); } String parseDatePickerSelected(Map selected) { final String year = selected['year'].toString().padLeft(4, '0'); final String month = selected['month'].toString().padLeft(2, '0'); final String day = selected['day'].toString().padLeft(2, '0'); return '$year-$month-$day'; } TDFormItem buildNameItem() { return TDFormItem( label: '菜谱名称', name: 'name', type: TDFormItemType.input, labelWidth: 82.0, showErrorMessage: true, requiredMark: true, child: TDInput( leftContentSpace: 0, inputDecoration: InputDecoration( hintText: "请输入菜谱名称", border: InputBorder.none, hintStyle: TextStyle(color: TDTheme.of(context).grayColor6), ), backgroundColor: Colors.white, additionInfoColor: TDTheme.of(context).errorColor6, showBottomDivider: false, onChanged: (val) { _formData['name'] = val; }, ), ); } TDFormItem buildDateItem() { return TDFormItem( label: '完成时间', name: 'date', labelWidth: 82.0, type: TDFormItemType.dateTimePicker, contentAlign: TextAlign.left, tipAlign: TextAlign.left, hintText: '请选择完成时间', select: _formData['date'], selectFn: (BuildContext context) { TDPicker.showDatePicker( context, title: '选择时间', onConfirm: (selected) { setState(() { print(selected); _selected_1 = '${selected['year'].toString().padLeft(4, '0')}-${selected['month'].toString().padLeft(2, '0')}-${selected['day'].toString().padLeft(2, '0')}'; _formItemNotifier['birth']?.upDataForm(_selected_1); }); Navigator.of(context).pop(); }, dateStart: [1999, 01, 01], dateEnd: [2050, 12, 31], initialDate: [2012, 1, 1], ); }, ); } TDFormItem buildImageItem() { return TDFormItem( label: '上传图片', name: 'photo', labelWidth: 82.0, type: TDFormItemType.upLoadImg, formItemNotifier: _formItemNotifier['photo'], child: TDUpload( files: files, onError: print, onValidate: print, onChange: ((imgList, type) { files = _onValueChanged(files ?? [], imgList, type); List imgs = files.map((e) => e.remotePath ?? e.assetPath).toList(); setState(() { _formItemNotifier['photo'].upDataForm(imgs.join(',')); }); }), ), ); } Widget buildFormBtnGroup() { return Container( decoration: BoxDecoration(color: TDTheme.of(context).whiteColor1), child: Padding( padding: const EdgeInsets.all(16), child: Row( children: [ Expanded( child: TDButton( text: '重置', type: TDButtonType.fill, theme: TDButtonTheme.light, shape: TDButtonShape.rectangle, onTap: () { //用户名称 _controller[0].clear(); //密码 _controller[1].clear(); }, ), ), SizedBox(width: 20), Expanded( child: TDButton( text: '提交', type: TDButtonType.fill, theme: TDButtonTheme.primary, shape: TDButtonShape.rectangle, onTap: () => {}, ), ), ], ), ), ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('新增记录'), backgroundColor: Colors.white), backgroundColor: Color(0xFFF5F5F5), body: Padding( padding: const EdgeInsets.all(10), child: ClipRRect( borderRadius: BorderRadius.circular(10), child: SingleChildScrollView( child: TDForm( formController: _formController, data: _formData, rules: _validationRules, formContentAlign: TextAlign.left, formShowErrorMessage: true, onSubmit: () => {}, items: [buildNameItem(), buildDateItem(), buildImageItem()], btnGroup: [buildFormBtnGroup()], ), ), ), ), ); } }