Flutter可编辑模型表单插件editable_model_form的使用

Flutter可编辑模型表单插件editable_model_form的使用

在Flutter中，使用editable_model_form插件可以快速构建一个可以从简单类模型切换为可编辑或不可编辑模式的表单。该插件通过简化代码量，让用户能够轻松实现表单的提交和状态管理。

功能概述

  • 动态表单生成：从简单的类模型生成表单，并支持可编辑和只读模式。
  • 表单提交处理：在表单提交后执行相应的操作。
  • 无需大量代码：只需少量代码即可实现复杂的表单功能。

使用方法

1. 创建模型类

首先，创建一个继承自EditableModel的模型类。该类将定义表单字段及其默认值。

import 'package:flutter/material.dart';
import 'package:editable_model_form/editable_model_form.dart';

// 定义表单模型类
class ForgetPasswordFormModel extends EditableModel<ForgetPasswordFormModel> {
  final String email;

  // 构造函数，接收参数初始化
  ForgetPasswordFormModel({required this.email});

  // 从JSON解析构造函数
  ForgetPasswordFormModel.fromJson(Map<String, Object?>? json)
      : this(
          email: json?.getValueOr(name: 'email', defaultValue: "") ?? "",
        );

  // 从编辑后的JSON解析构造函数
  [@override](/user/override)
  ForgetPasswordFormModel fromEditJson(Map<String, dynamic> json) =>
      ForgetPasswordFormModel.fromJson(json);

  // 定义表单视图类型
  [@override](/user/override)
  List<FormViewType> getFormViewTypes() {
    return [
      FormEmailInputViewType(
        key: "email", // 字段标识符
        label: "邮箱:", // 字段标签
        icon: const Icon(Icons.email), // 输入框左侧图标
        defaultValue: email, // 默认值
      ),
    ];
  }

  // 将数据转换为JSON格式
  Map<String, Object?> toJson() {
    return {
      'email': email,
    };
  }
}

2. 创建表单界面

接下来，使用EditFormScreen来渲染表单，并处理表单提交逻辑。

import 'package:flutter/material.dart';
import 'package:editable_model_form/editable_model_form.dart';
import 'forget_password_form_model.dart'; // 引入刚才创建的模型类

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("可编辑模型表单示例")),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              _showEditForm(context);
            },
            child: Text("打开表单"),
          ),
        ),
      ),
    );
  }

  // 显示表单的弹窗
  void _showEditForm(BuildContext context) {
    EditFormScreen<ForgetPasswordFormModel>(
      title: "请输入您的邮箱地址",
      editableModel: ForgetPasswordFormModel(email: ""), // 初始化模型
      onSubmit: (result) {
        debugPrint("表单提交结果: ${result.toJson()}");

        // 处理表单提交逻辑
        Navigator.pop(context); // 关闭弹窗
      },
    ).showInDialog(context: context, title: "重置密码");
  }
}

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

1 回复

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


editable_model_form 是一个用于 Flutter 的插件，它可以帮助开发者快速创建一个可编辑的模型表单。这个插件特别适合用于需要编辑数据模型的场景，例如编辑用户信息、产品信息等。

安装

首先，你需要在 pubspec.yaml 文件中添加 editable_model_form 依赖：

dependencies:
  flutter:
    sdk: flutter
  editable_model_form: ^1.0.0  # 请查看最新版本

然后运行 flutter pub get 来安装依赖。

基本用法

editable_model_form 的核心是 EditableModelForm 组件。你需要提供一个数据模型和对应的字段定义，插件会自动生成可编辑的表单。

1. 定义数据模型

首先，你需要定义一个数据模型类。例如，定义一个 User 类：

class User {
  String name;
  int age;
  String email;

  User({required this.name, required this.age, required this.email});
}

2. 定义表单字段

接下来，你需要定义表单的字段。你可以使用 EditableField 类来定义每个字段的属性，例如字段类型、标签、验证规则等。

import 'package:editable_model_form/editable_model_form.dart';

List<EditableField> userFields = [
  EditableField(
    key: 'name',
    label: 'Name',
    type: EditableFieldType.text,
    isRequired: true,
  ),
  EditableField(
    key: 'age',
    label: 'Age',
    type: EditableFieldType.number,
    isRequired: true,
  ),
  EditableField(
    key: 'email',
    label: 'Email',
    type: EditableFieldType.email,
    isRequired: true,
  ),
];

3. 使用 EditableModelForm

现在你可以使用 EditableModelForm 来创建一个可编辑的表单。你需要提供一个初始值和一个回调函数来处理表单提交。

import 'package:flutter/material.dart';
import 'package:editable_model_form/editable_model_form.dart';

class EditUserForm extends StatelessWidget {
  final User user;

  EditUserForm({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Edit User'),
      ),
      body: EditableModelForm(
        fields: userFields,
        model: user.toJson(),
        onSubmit: (Map<String, dynamic> updatedModel) {
          // 处理表单提交
          User updatedUser = User(
            name: updatedModel['name'],
            age: updatedModel['age'],
            email: updatedModel['email'],
          );
          print('Updated User: $updatedUser');
        },
      ),
    );
  }
}

4. 数据模型与 JSON 转换

为了方便表单的数据处理，你可以在 User 类中添加 toJson 和 fromJson 方法：

class User {
  String name;
  int age;
  String email;

  User({required this.name, required this.age, required this.email});

  Map<String, dynamic> toJson() => {
        'name': name,
        'age': age,
        'email': email,
      };

  factory User.fromJson(Map<String, dynamic> json) => User(
        name: json['name'],
        age: json['age'],
        email: json['email'],
      );
}

自定义字段类型

EditableModelForm 支持多种字段类型，例如文本、数字、日期、选择框等。你可以在 EditableField 中指定 type 属性来定义字段类型。

EditableField(
  key: 'gender',
  label: 'Gender',
  type: EditableFieldType.select,
  options: ['Male', 'Female', 'Other'],
),

表单验证

你可以在 EditableField 中设置 isRequired 属性来标记字段是否为必填项。你还可以通过 validator 属性自定义验证逻辑。

EditableField(
  key: 'email',
  label: 'Email',
  type: EditableFieldType.email,
  isRequired: true,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    if (!value.contains('@')) {
      return 'Invalid email address';
    }
    return null;
  },
),
回到顶部