food_hub_app/lib/views/recordForm.dart

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/utils/index.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<RecordFormPage> createState() => _RecordFormPage();
}

class _RecordFormPage extends State<RecordFormPage> {
  final _formKey = GlobalKey<FormBuilderState>();

  List<TextEditingController> _controller = [];
  FormController _formController = FormController();

  String _selected_1 = '';
  String _selected_2 = '';
  String? _initLocalData;

  final ImagePicker _picker = ImagePicker();
  XFile? _selectedImage;

  /// 整个表单存放的数据
  Map<String, dynamic> _formData = {"name": '', "date": '', "photo": ''};

  /// 定义整个校验规则
  final Map<String, TDFormValidation> _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,
    ),
  };

  List<TDUploadFile> files = [];

  List<TDUploadFile> _onValueChanged(
    List<TDUploadFile> fileList,
    List<TDUploadFile> 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() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  void _confirmClick(BuildContext context) {
    if (_formKey.currentState?.saveAndValidate() ?? false) {
      // showSuccessToast("新增记录成功");
      print(_formData);
    } else {
      TDMessage.showMessage(
        context: context,
        visible: true,
        icon: true,
        content: "请先输入信息",
        theme: MessageTheme.error,
        duration: 3000,
      );
    }
  }

  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: (value) {
          _formData['name'] = value;
        },
      ),
    );
  }

  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) {
        DateTime now = DateTime.now();
        TDPicker.showDatePicker(
          context,
          title: '选择时间',
          onConfirm: (selected) {
            setState(() {
              _formData['date'] = parseDatePickerSelected(selected);
            });
            Navigator.of(context).pop();
          },
          dateStart: [2000, 01, 01],
          dateEnd: [2100, 12, 31],
          initialDate: [now.year, now.month, now.day],
        );
      },
    );
  }

  TDFormItem buildImageItem() {
    return TDFormItem(
      label: '上传图片',
      name: 'photo',
      labelWidth: 82.0,
      type: TDFormItemType.upLoadImg,
      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(() {});
        }),
      ),
    );
  }

  Widget buildFormBtnGroup() {
    return Container(
      decoration: BoxDecoration(color: TDTheme.of(context).whiteColor1),
      child: Padding(
        padding: const EdgeInsets.all(10),
        child: Row(
          children: [
            Expanded(
              child: TDButton(
                text: '取消',
                type: TDButtonType.fill,
                theme: TDButtonTheme.light,
                shape: TDButtonShape.rectangle,
                onTap: () => Navigator.pop(context),
              ),
            ),
            SizedBox(width: 20),
            Expanded(
              child: TDButton(
                text: '提交',
                type: TDButtonType.fill,
                theme: TDButtonTheme.primary,
                shape: TDButtonShape.rectangle,
                onTap: () => _confirmClick(context),
              ),
            ),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('新增记录', style: TextStyle(color: Colors.white)),
        backgroundColor: Theme.of(context).primaryColor,
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: () => Navigator.pop(context)
        ),
      ),
      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()],
            ),
          ),
        ),
      ),
    );
  }
}