Flutter插件junny_forme的介绍与使用方法

在本文中，我们将探讨如何使用 junny_forme 插件来构建一个具有动态表单验证功能的 Flutter 应用。通过该插件，我们可以轻松实现表单字段的状态管理、验证逻辑以及与用户交互的实时反馈。

Web Demo

您可以访问以下链接查看 junny_forme 的在线演示：

https://www.qyh.me/forme3/index.html

简单使用

添加依赖

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

dependencies:
  forme: ^版本号
  forme_base_fields: ^版本号

然后运行以下命令以安装依赖：

flutter pub add forme
flutter pub add forme_base_fields

创建表单

接下来，我们创建一个简单的表单组件。以下是代码示例：

import 'package:flutter/material.dart';
import 'package:junny_forme/forme.dart';
import 'package:junny_forme/fields/forme_text_field.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FormeExamplePage(),
    );
  }
}

class FormeExamplePage extends StatefulWidget {
  @override
  _FormeExamplePageState createState() => _FormeExamplePageState();
}

class _FormeExamplePageState extends State<FormeExamplePage> {
  final FormeKey _formKey = FormeKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forme 示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Forme(
          key: _formKey,
          child: Column(
            children: [
              // 用户名输入框
              FormeTextField(
                name: 'username',
                decoration: const InputDecoration(labelText: '用户名'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return '请输入用户名';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              // 密码输入框
              FormeTextField(
                name: 'password',
                decoration: const InputDecoration(labelText: '密码'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.length < 6) {
                    return '密码长度至少为6位';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 16),
              // 提交按钮
              FormeValidationListener(
                builder: (context, validation, child) {
                  return ElevatedButton(
                    onPressed: validation.isValid ? () {
                      if (_formKey.validate().isSuccess) {
                        print('表单提交成功');
                      }
                    } : null,
                    child: const Text('提交'),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Forme 属性

Forme 是整个表单的核心组件，支持以下属性：

FormeField 属性

FormeField 是表单字段的基本单元，支持以下通用属性：

验证

异步验证

asyncValidator 是异步验证器，它返回一个 Future<String>。以下是一个示例：

asyncValidator: (field, value, isValid) {
  return Future.delayed(const Duration(seconds: 2), () {
    if (value == null || value.isEmpty) {
      return '请输入有效值';
    }
    return null;
  });
},

防抖机制

可以通过设置 asyncValidatorDebounce 来启用防抖机制：

asyncValidatorDebounce: const Duration(milliseconds: 500),

方法

FormeKey 和 FormeState

是否包含指定字段

bool hasField = _formKey.hasField('username');

获取字段状态

FormFieldState field = _formKey.field<FormFieldState>('username');

获取表单值

Map<String, dynamic> data = _formKey.value;

设置表单值

_formKey.value = {'username': 'newUser'};

验证表单

Future<FormeValidateSnapshot> future = _formKey.validate({
  bool quietly = false,
  Set<String> names = const {},
  bool clearError = false,
  bool validateByOrder = false,
});

监听器

FormeFieldStatusListener

监听字段状态变化：

FormeFieldStatusListener(
  filter: (status) => status.isValueChanged,
  name: 'username',
  builder: (context, status, child) {
    return Text('当前值: ${status.value}');
  },
),

FormeValidationListener

监听表单整体验证状态：

FormeValidationListener(
  builder: (context, validation, child) {
    return ElevatedButton(
      onPressed: validation.isValid ? submit : null,
      child: const Text('提交'),
    );
  },
),