Flutter智能表单构建插件smart_forms的使用

智能表单构建插件smart_forms简介

智能表单构建插件smart_forms旨在提供一种简单的方式来构建和验证表单，并支持特定类型的字段。

示例

正常用法

在正常用法示例中，我们展示了如何使用smart_forms构建一个简单的表单。此示例展示了如何初始化表单模型、字段模型，并将其集成到应用中。

示例代码

import 'package:flutter/material.dart';
import 'package:smart_forms/models/field.model.dart';
import 'package:smart_forms/models/form.model.dart';
import 'package:smart_forms/smart_forms.dart';
import 'package:smart_forms/utils/enums.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是您的应用的根节点。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Forms',
      theme: ThemeData(
        primarySwatch: Colors.black as MaterialColor?,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Smart Forms'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FormModel? _form;

  // 表单提交后的回调函数
  _formDone(Map<String, dynamic> res) {
    print(res);
  }

  @override
  void initState() {
    // 初始化表单模型
    _form = FormModel(
      submitButton: "Submit",
      resetButton: "Restart",
      name: "Test",
      fields: [
        FieldModel(
          label: "Field 1",
          type: Types.number,
          validate: true,
        ),
        FieldModel(
          label: "Field 2",
          type: Types.text,
          validate: true,
        )
      ],
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: SmartForms(
          form: _form,
          callback: _formDone,
        ),
      ),
    );
  }
}

按钮外置

按钮外置示例展示了如何将提交和重置按钮放置在表单之外。

示例代码

import 'package:flutter/material.dart';
import 'package:smart_forms/models/field.model.dart';
import 'package:smart_forms/models/form.model.dart';
import 'package:smart_forms/smart_forms.dart';
import 'package:smart_forms/utils/enums.dart';

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

class MyApp extends StatelessWidget {
  // 这个小部件是您的应用的根节点。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Smart Forms',
      theme: ThemeData(
        primarySwatch: Colors.black as MaterialColor?,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Smart Forms'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, this.title}) : super(key: key);

  final String? title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FormModel? _form;
  bool _showForm = false;

  _formDone(Map<String, dynamic> res) {
    print(res);
  }

  @override
  void initState() {
    // 初始化表单模型
    _form = FormModel(
      submitButton: "Submit",
      resetButton: "Restart",
      name: "Test",
      fields: [
        FieldModel(
          label: "Field 1",
          type: Types.number,
          validate: true,
        ),
        FieldModel(
          label: "Field 2",
          type: Types.text,
          validate: true,
        )
      ],
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title!),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _showForm = !_showForm;
                });
              },
              child: Text(_showForm ? "Hide Form" : "Show Form"),
            ),
            if (_showForm)
              SmartForms(
                form: _form,
                callback: _formDone,
              ),
          ],
        ),
      ),
    );
  }
}

功能特性

字段类型

smart_forms 提供了多种字段类型，这些类型可以通过一个枚举来指定：

• 文本（Text）
• 多行文本（Multiline）
• 数字（Number）
• 电话（Phone）
• 邮件（E-Mail）
• URL
• 下拉菜单（Dropdown）
• 日期选择器（DatePicker）

输入动作

您可以为每个字段设置键盘上的“回车”键触发的动作。目前支持以下三种动作：

• 下一个（Next）
• 完成（Done）
• 自动（Auto）：如果这是最后一个字段，则自动完成；否则，下一个字段。

按钮

smart_forms 可以添加两个按钮，只需提供标签即可渲染：

• 提交按钮（Submit Button）
• 重置按钮（Reset Button）

此外，您还可以使用自定义按钮，并访问表单的状态，包括验证表单、重置表单和将响应转换为映射的方法。

如何工作

要使用 smart_forms，您需要生成两种实体：

字段模型

字段模型包含表单字段的所有参数和设置。这些参数包括：

• label: 字符串（必填）
• type: 使用 Types 枚举
• errorMessage: 字符串
• mandatory: 布尔值
• actions: 使用 Actions 枚举
• hint: 字符串
• validate: 布尔值
• maxLength: 整数
• password: 布尔值
• readOnly: 布尔值
• maxLength: 整数
• maxLengthMessage: 字符串
• minLength: 整数
• minLengthMessage: 字符串
• options: List<FieldOptionsmodel>
• dateTimeFormat: 字符串 - Intl 格式

表单模型

表单模型是插件的基础，只包含少量变量：

• key: GlobalKey<SmartFormState>
• name: 字符串（必填）
• submitButton: 字符串
• resetButton: 字符串
• callback
• fields: FieldModel 实体列表（必填）

返回语句

在表单提交时，您会收到类似以下的返回结果：

{
    "form": "<提交的表单名称>",
    "values": {
        "<字段标签>": "<获得的值>"
    }
}