Flutter表单生成插件advanced_form_generator的使用

在本教程中，我们将介绍如何使用advanced_form_generator插件来生成表单。该插件允许你轻松创建复杂的表单，并且支持自定义输入字段。

使用方法

首先，你需要导入必要的包：

import 'package:advanced_form_generator/widgets/FormFieldItem.dart';
import 'package:advanced_form_generator/widgets/FormFieldSection.dart';
import 'package:advanced_form_generator/advanced_form_generator.dart';
import 'package:advanced_form_generator/widgets/IFormFieldItem.dart';
import 'package:flutter/material.dart';

示例代码

以下是一个完整的示例代码，展示了如何使用advanced_form_generator插件创建一个表单：

// 导入必要的包
import 'package:advanced_form_generator/widgets/FormFieldItem.dart';
import 'package:advanced_form_generator/widgets/FormFieldSection.dart';
import 'package:advanced_form_generator/advanced_form_generator.dart';
import 'package:advanced_form_generator/widgets/IFormFieldItem.dart';
import 'package:flutter/material.dart';

// 定义一个自定义文本输入组件
class CustomText extends StatelessWidget implements IFormFieldItem {
  @override
  TextEditingController? controller;

  @override
  String? initialValue;
  @override
  String mapKey;

  @override
  InputDecoration? decoration;

  @override
  String label;

  CustomText({
    Key? key,
    this.controller,
    this.initialValue,
    this.hint,
    required this.label,
    required this.mapKey,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      decoration: decoration,
      style: TextStyle(fontSize: 18, color: Colors.grey[900]),
    );
  }

  @override
  String? hint;
}

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  late final AdvancedFormGenerator formGenerator;

  @override
  void initState() {
    formGenerator = AdvancedFormGenerator(
      inputs: [
        FormFieldItem(
          label: 'Name',
          required: true,
          mapKey: 'name',
        ),
        FormFieldItem(
          label: 'E-mail',
          mapKey: 'email',
          required: true,
          validator: (String? value) {
            if (value == null || value.isEmpty) {
              return 'E-mail is required';
            }
            return null;
          },
        ),

        // 示例自定义部分
        const FormFieldSection(title: 'Security section'),

        FormFieldItem(
          label: 'Password',
          mapKey: 'password',
          obscureText: true,
          required: true,
        ),
        FormFieldItem(
          label: 'Password Confirmation',
          mapKey: 'passwordConfirm',
          obscureText: true,
          required: true,
        ),
        CustomText(
          mapKey: 'custom',
          label: 'Custom Text Field',
        ),
      ],
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          IconButton(
              onPressed: () {
                if (_formKey.currentState!.validate()) {
                  debugPrint(formGenerator.toMap().toString());
                }
              },
              icon: const Icon(Icons.save))
        ],
      ),
      body: Container(
        padding: const EdgeInsets.all(10),
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Form(
          key: _formKey,
          autovalidateMode: AutovalidateMode.onUserInteraction,
          child: Column(
            children: formGenerator.render(),
          ),
        ),
      ),
    );
  }
}

方法

`toMap`

返回包含所有字段及其值的Map。

参数

[ignoreEmpty] - 如果为true，则忽略空字段，默认为false
[emptyValue] - 如果ignoreEmpty为false且字段为空时使用的值，默认为false

示例

AdvancedFormGenerator formGenerator = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
]);

// 返回表单的属性和值的映射
formGenerator.toMap();

// 示例输出
/*
{
  'email': '',
  'password': ''
}
*/

`render`

返回一个包含所有要渲染的小部件的List。

示例

AdvancedFormGenerator formGenerator = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
]);

...

// 在小部件中
Column(
  children: formGenerator.render(),
),

// 或者
Column(
  children: [
    Text('Example'),
    ...formGenerator.render(),
  ]
),

`reset`

重置所有TextEditingController到空状态。

示例

AdvancedFormGenerator form = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
    initialValue: 'test@email.com'
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
]);

// 重置前
Map values = form.toMap();
// {'email': 'test@email.com', 'password': ''}

// 重置后
form.reset();
values = form.toMap();
// {'email': '', 'password': ''}

`getValue`

根据键获取输入字段的值，如果键不存在，则返回null。

参数

[key] - 必须传递，是mapKey属性的同义词，通过键可以获取单个文本字段的值。

示例

AdvancedFormGenerator form = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
    initialValue: 'test@email.com'
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
]);

String? email = form.getValue('email');
// email = 'test@email.com'
String? password = form.getValue('password');
// password = ''
String? other = form.getValue('other');
// other = null

`setValue`

设置文本输入的值，如果传递的键有效。

参数

[key] - 必须传递，是mapKey属性的同义词，通过键可以获取单个文本字段的值。
[value] - 必须传递，是一个字符串字段，将作为文本输入的新值。

示例

AdvancedFormGenerator form = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
    initialValue: 'test@email.com'
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
]);

String? email = form.getValue('email');
// email = 'test@email.com'
form.setValue('email', 'email@email.com');
email = form.getValue('email');
// email = 'email@email.com'

如何创建一个自定义`FormFieldItem`小部件

import 'package:advanced_form_generator/widgets/IFormFieldItem.dart';
import 'package:flutter/material.dart';

class CustomText extends StatelessWidget implements IFormFieldItem {
  @override
  TextEditingController? controller;

  @override
  String? initialValue;
  @override
  String mapKey;

  @override
  InputDecoration? decoration;

  @override
  String label;

  CustomText({
    Key? key,
    this.controller,
    this.initialValue,
    this.hint,
    required this.label,
    required this.mapKey,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      decoration: decoration,
      style: TextStyle(fontSize: 18, color: Colors.grey[900]),
    );
  }

  @override
  String? hint;
}

如何改变`FormFieldItem`的样式

你可以单独修改样式，如下所示：

FormFieldItem(
  label: 'E-mail',
  required: true,
  mapKey: 'email',
  decoration: InputDecoration(
    labelText: 'Email',
    labelStyle: TextStyle(fontSize: 18, color: Colors.grey[900]),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  ),
)

或者对所有FormFieldItem进行统一修改：

AdvancedFormGenerator formGenerator = AdvancedFormGenerator(inputs: [
  FormFieldItem(
    label: 'E-mail',
    required: true,
    mapKey: 'email',
  ),
  FormFieldItem(
    label: 'Password',
    mapKey: 'password',
  ),
],
decoration: InputDecoration(
  labelText: 'Email',
  labelStyle: TextStyle(fontSize: 18, color: Colors.grey[900]),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
  ),
));

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

gougou168 1楼

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

当然，下面是一个关于如何使用 advanced_form_generator 插件在 Flutter 中生成表单的示例代码。这个插件允许你通过 JSON 配置动态生成表单，非常适合需要灵活表单布局的应用。

首先，确保你已经在 pubspec.yaml 文件中添加了 advanced_form_generator 依赖：

dependencies:
  flutter:
    sdk: flutter
  advanced_form_generator: ^latest_version  # 请替换为最新版本号

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

以下是一个简单的示例，展示如何使用 advanced_form_generator 来创建一个表单：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final _formKey = GlobalKey<FormState>();
  Map<String, dynamic> _formData = {};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Advanced Form Generator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: AdvancedFormGenerator(
            formData: _formData,
            formElements: [
              // 示例表单元素，可以根据需要添加更多
              FormElement(
                type: FormElementType.textField,
                name: 'name',
                label: 'Name',
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Name is required';
                  }
                  return null;
                },
              ),
              FormElement(
                type: FormElementType.emailField,
                name: 'email',
                label: 'Email',
                validator: (value) {
                  if (!value.contains('@')) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
              ),
              FormElement(
                type: FormElementType.numberField,
                name: 'age',
                label: 'Age',
                validator: (value) {
                  if (value == null || value <= 0) {
                    return 'Age must be a positive number';
                  }
                  return null;
                },
              ),
              FormElement(
                type: FormElementType.dropdown,
                name: 'gender',
                label: 'Gender',
                options: ['Male', 'Female', 'Other'],
                validator: (value) {
                  if (value.isEmpty) {
                    return 'Gender is required';
                  }
                  return null;
                },
              ),
              FormElement(
                type: FormElementType.checkbox,
                name: 'subscribe',
                label: 'Subscribe to newsletter',
              ),
            ],
            onSubmit: (Map<String, dynamic> formData) {
              setState(() {
                _formData = formData;
                // 在这里处理表单提交，比如发送到服务器
                print('Form Data: $_formData');
              });
              // 重置表单
              _formKey.currentState?.reset();
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            _formKey.currentState!.save();
            // 提交表单
            // 这里通常会有 AdvancedFormGenerator 的 onSubmit 被调用
          }
        },
        tooltip: 'Submit',
        child: Icon(Icons.send),
      ),
    );
  }
}

在这个示例中，我们创建了一个包含文本字段、电子邮件字段、数字字段、下拉菜单和复选框的表单。每个表单元素都通过 FormElement 类配置，并传递给 AdvancedFormGenerator 组件。onSubmit 回调在表单提交时被调用，并接收包含表单数据的 Map。

请注意，FormElement 的 validator 属性用于表单验证。如果验证失败，将返回一个错误消息字符串；否则返回 null。

这个示例提供了一个基础的实现，你可以根据具体需求进一步自定义和扩展。

Flutter表单生成插件advanced_form_generator的使用

Flutter表单生成插件advanced_form_generator的使用

使用方法

示例代码

方法

toMap

参数

示例

render

示例

reset

示例

getValue

参数

示例

setValue

参数

示例

如何创建一个自定义FormFieldItem小部件

如何改变FormFieldItem的样式

`toMap`

`render`

`reset`

`getValue`

`setValue`

如何创建一个自定义`FormFieldItem`小部件

如何改变`FormFieldItem`的样式