Flutter表单处理插件ec_form的使用

Flutter表单处理插件ec_form的使用

在Flutter开发中，处理表单是一个常见的需求。本文将介绍如何使用ec_form插件来简化表单的创建和数据收集过程。

1 通过简单的集成就可以实现输入、选择等各种类型的表单

ec_form插件提供了多种表单组件，如输入框、日期选择器、下拉选择器等，开发者只需简单配置即可快速构建复杂的表单界面。

2 通过check可以检查每个必须提交的表单是否有值，没有则底部提示 errorString

在提交表单时，可以通过check方法验证表单字段是否符合要求。如果某个字段未填写，会在表单底部显示错误提示信息。

3 通过getParam可以轻松拿到输入的或着选择等行为产生的值，并按照paramKey作为入参的key获得

通过getParam方法可以获取用户输入或选择的值，这些值会以paramKey为键存储在一个字典中，方便后续处理。

每一个表单组成的整个字典

以下是一个完整的案例，展示了如何使用ec_form插件来构建和提交表单。

示例代码

class _ECFormDemoPage extends ECFormBasePage {
  _ECFormDemoPageVM vm = _ECFormDemoPageVM();

  _ECFormDemoPage({super.key});

  [@override](/user/override)
  String? get title => "表单提交";

  [@override](/user/override)
  Widget? get leading => Container();

  [@override](/user/override)
  Widget? get bottomWidget =>
      TextButton(onPressed: vm.commit, child: const Text("提交"));

  [@override](/user/override)
  ECFormBasePageVM get pageVM => vm;

  [@override](/user/override)
  setup(BuildContext context) {
    vm.loadData();
    return super.setup(context);
  }
}

class _ECFormDemoPageVM extends ECFormBasePageVM {
  /// 配置cell vm
  loadData() {
    datas.addAll([
      // 输入
      ECFormInputWidgetVM(
        paramKey: 'name',
        value: "不可修改名字",
        title: '名字',
        enable: false,
      ),

      ECFormInputWidgetVM(
        paramKey: 'name1',
        title: '名字',
        checkCall: (out) => out.length >= 2,
        errorString: "至少输入2个字",
      ),

      // 日期
      ECFormDateSelectWidgetVM(paramKey: 'startDate', title: "出发时间"),
      ECFormDateSelectWidgetVM(paramKey: 'endDate', title: "到达时间"),

      // 选择
      ECFormInputSelectWidgetVM(
        paramKey: 'cardId',
        title: "车子",
        checkCall: (out) => out.isNotEmpty,
        errorString: "请选择",
        selectList: [
          ECFormInputSelectItem(name: "宝马", value: "475993"),
          ECFormInputSelectItem(name: "奔驰", value: "976979")
        ],
      ),

      // 选择(带单位)
      ECFormInputSelectUnitWidgetVM(
        paramKey: 'cardWight',
        title: "车子重",
        keyboardType: TextInputType.number,
        selectedItem: ECFormInputSelectItem(name: "吨", value: "1"),
      ),

      // 选择(带可选择单位)
      ECFormInputSelectUnitWidgetVM(
        paramKey: 'cardWight1',
        unitParamKey: "unitCode",
        title: "重量",
        selectedItem: ECFormInputSelectItem(name: "吨", value: "1"),
        unitCanSelect: true,
        keyboardType: TextInputType.number,
        unitSelectList: [
          ECFormInputSelectItem(name: "吨", value: "1"),
          ECFormInputSelectItem(name: "千克", value: "2")
        ],
      ),

      // 备注
      ECFormRemarkWidgetVM(
        title: "添加备注",
        paramKey: 'remark',
        height: 100,
        maxLength: 50,
      ),

      // 展示
      ECFormSectionTitleWidgetVM(title: "大标题")
    ]);

    update();
  }

  commit() {
    // 如果有必选的参数没有值则底部出现红色提示 errorString
    if (!check()) return;

    // 收集的参数param
    Map<String, dynamic> param = getParam();

    debugPrint("收集的参数: ${param.toString()}");
  }
}

更多关于Flutter表单处理插件ec_form的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter表单处理插件ec_form的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


ec_form 是一个用于简化 Flutter 表单处理的插件。它提供了便捷的方式来管理表单数据、验证表单字段以及处理表单提交。以下是如何使用 ec_form 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 ec_form 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  ec_form: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来获取依赖。

2. 导入包

在你的 Dart 文件中导入 ec_form 包：

import 'package:ec_form/ec_form.dart';

3. 创建表单控制器

ec_form 使用 FormController 来管理表单的状态。你可以通过继承 FormController 来创建自定义的表单控制器。

class MyFormController extends FormController {
  // 定义表单字段
  final TextEditingController nameController = TextEditingController();
  final TextEditingController emailController = TextEditingController();

  @override
  void dispose() {
    // 清理控制器
    nameController.dispose();
    emailController.dispose();
    super.dispose();
  }

  @override
  Map<String, dynamic> toJson() {
    // 将表单数据转换为 JSON
    return {
      'name': nameController.text,
      'email': emailController.text,
    };
  }

  @override
  bool validate() {
    // 表单验证逻辑
    if (nameController.text.isEmpty) {
      return false;
    }
    if (emailController.text.isEmpty || !emailController.text.contains('@')) {
      return false;
    }
    return true;
  }
}

4. 构建表单 UI

在 build 方法中构建表单 UI，并将表单控制器与 UI 组件绑定。

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final MyFormController _formController = MyFormController();

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My Form'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _formController.nameController,
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              controller: _formController.emailController,
              decoration: InputDecoration(labelText: 'Email'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (_formController.validate()) {
                  // 表单提交逻辑
                  print(_formController.toJson());
                } else {
                  // 显示错误提示
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Please fill in all fields correctly')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

5. 运行应用

将 MyForm 作为应用的入口页面运行：

void main() {
  runApp(MaterialApp(
    home: MyForm(),
  ));
}
回到顶部