Flutter表单构建插件ezform的使用

Flutter表单构建插件ezform的使用

本文将介绍如何使用Flutter表单构建插件ezform来快速创建复杂的表单。

特性

ezform插件可以帮助开发者轻松地构建复杂的表单，并支持嵌套字段。它还提供了内置验证功能和动态值更新能力。

开始使用

添加依赖

在pubspec.yaml文件中添加以下依赖：

dependencies:
  ezform: ^版本号

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

使用

创建表单

首先，我们需要创建一个EzForm实例，并定义输入字段及其属性。

EzForm form = EzForm(
  inputs: {
    'name': EzFormInput(
      title: 'Name',
      value: 'Hari Singh',
      validator: (value) => true,
    ),
    'email': EzFormInput(
      title: 'Email',
      value: 'hsbijarniya@gmail.com',
      validator: (value) => true,
    ),
    'password': EzFormInput(
      type: 'password',
      title: 'Password',
      value: 'password',
      validator: (value) => true,
    ),
    'address': {
      'line': EzFormInput(
        title: 'Line',
        value: 'B97',
        validator: (value) => true,
      ),
      'city': EzFormInput(
        title: 'City',
        value: 'Jaipur',
        validator: (value) => true,
      ),
      'state': EzFormInput(
        title: 'State',
        value: 'Rajasthan',
        validator: (value) => true,
      ),
      'country': EzFormInput(
        title: 'Country',
        value: 'India',
        validator: (value) => true,
      ),
    }
  },
  values: {
    '_id': '',
    'image': '',
  },
  builder: (props) {
    return AppTextField(
      textFieldType: TextFieldType.NAME,
      // keyboardType: props.keyboardType,
      controller: props.controller,
      focus: props.focus,
      nextFocus: props.next?.focus,
    );
  },
);

构建表单字段

接下来，我们将使用build方法来渲染表单字段。

@override
Widget build(BuildContext context) {
  return ListView(
    children: [
      form.build('name'),
      SizedBox(height: 16),
      form.build('email'),
      SizedBox(height: 16),
      form.build('mobile'),
      SizedBox(height: 16),
      Text('Address'),
      form.build('address.line'),
      SizedBox(height: 16),
      form.build('address.city'),
      SizedBox(height: 16),
      form.build('address.state'),
      SizedBox(height: 16),
      form.build('address.country'),
      SizedBox(height: 16),
      form.build('address.pincode'),
      SizedBox(height: 16),
      TextButton(
        child: Text('Upload image'),
        onPressed: () {
          form.values['image'] = '123';
          form.refreshValues();
        },
      ),
      TextButton(
        child: Text('Done'),
        onPressed: () {
          // jsonEncode(form.values)
        },
      )
    ],
  );
}

动态更新值

我们可以通过values属性动态更新表单的值，并调用refreshValues方法来刷新UI。

TextButton(
  child: Text('Upload image'),
  onPressed: () {
    form.values['image'] = '123';
    form.refreshValues();
  },
),

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

1 回复

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


ezform 是一个用于简化 Flutter 表单构建的插件。它旨在减少样板代码，同时提供灵活的表单验证和数据处理功能。以下是如何使用 ezform 插件构建表单的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 ezform 依赖：

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

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

2. 创建表单

使用 EzForm 组件来创建表单。EzForm 是一个 StatefulWidget，它管理表单的状态和验证逻辑。

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

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

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<EzFormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EzForm Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: EzForm(
          key: _formKey,
          child: Column(
            children: [
              EzTextFormField(
                labelText: 'Username',
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter a username';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              EzTextFormField(
                labelText: 'Password',
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter a password';
                  }
                  if (value.length < 6) {
                    return 'Password must be at least 6 characters';
                  }
                  return null;
                },
              ),
              SizedBox(height: 24),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 表单验证通过，处理表单数据
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

3. 表单字段

ezform 提供了多种预定义的表单字段组件，如 EzTextFormField、EzDropdownFormField、EzCheckboxFormField 等。这些组件与 Flutter 的原生表单组件类似，但集成了 ezform 的表单管理功能。

4. 表单验证

每个表单字段都可以通过 validator 属性进行验证。validator 是一个函数，它接收字段的当前值并返回一个错误消息（如果验证失败）或 null（如果验证通过）。

5. 处理表单提交

在表单提交按钮的 onPressed 回调中，调用 _formKey.currentState!.validate() 来验证所有表单字段。如果所有字段都通过验证，可以继续处理表单数据。

6. 获取表单数据

你可以通过 EzFormState 来获取表单数据。例如：

final formData = _formKey.currentState!.values;
回到顶部