Flutter表单构建插件bixat_form的使用

BixatForm 是一个为 Flutter 应用程序设计的插件，旨在简化表单创建和管理。它提供了强大的、灵活的解决方案，用于构建具有内置验证和状态管理的响应式表单。

特性

• 响应式表单：基于用户输入和验证状态自动更新表单。
• 内置验证：为每个表单项实现自定义验证逻辑。
• 状态管理：轻松管理表单状态转换（启用、加载、禁用、完成）。
• 灵活的数据检索：通过统一的 API 获取表单数据。
• 可选字段：支持不影响整体表单有效性的可选字段。
• 排除字段：能够将某些字段排除在最终数据之外。

安装

在您的 Flutter 项目中添加 BixatForm：

dependencies:
  bixat_form: ^<最新版本>

使用

以下是一个基本的使用示例：

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

// 创建一个带有 BixatForm 的类
class MyForm with BixatForm {
  // 定义用户名字段
  TextEditingController get usernameField =>
      put('username', TextEditingController());

  // 定义密码字段
  TextEditingController get passwordField =>
      put('password', TextEditingController());

  // 可选字段列表
  @override
  List<String> get optionalFields => ['terms_accepted'];

  // 自定义验证逻辑
  @override
  bool onValidate(dynamic e) {
    if (e == null) return false;
    final bool result = switch (e.runtimeType) {
      TextEditingController => e.text.isNotEmpty,
      _ => true,
    };
    return result;
  }
}

// 表单 UI 构建
class LoginFormUI extends StatelessWidget {
  final bixatForm = BixatController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('登录表单')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            // 用户名输入框
            TextFormField(
              controller: bixatForm.usernameField,
              decoration: InputDecoration(labelText: '用户名'),
              onChanged: bixatForm.onChanged,
            ),
            SizedBox(height: 16),
            // 密码输入框
            TextFormField(
              controller: bixatForm.passwordField,
              obscureText: true,
              decoration: InputDecoration(labelText: '密码'),
              onChanged: bixatForm.onChanged,
            ),
            SizedBox(height: 16),
            // 提交按钮
            ValueListenableBuilder(
              valueListenable: bixatForm.state,
              builder: (context, _, __) {
                return ElevatedButton(
                  onPressed: bixatForm.disabled ? null : bixatForm.submit,
                  child: Text(bixatForm.state.value == BixatFormState.loading
                      ? '加载中...'
                      : '登录'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

自定义

可选字段

定义不会影响整体表单有效性的可选字段：

class MyForm with BixatForm {
  @override
  List<String> get optionalFields => ['terms_accepted'];
}

验证逻辑

为每个字段实现自定义验证逻辑：

@override
bool onValidate(dynamic e) {
  if (e == null) return false;
  final bool result = switch (e.runtimeType) {
    TextEditingController => e.text.isNotEmpty,
    _ => true,
  };
  return result;
}

数据检索

通过统一的 API 获取表单数据：

MapEntry<String, dynamic> getData(String key, value) {
  final result = switch (value.runtimeType) {
    TextEditingController => value.text,
    _ => value,
  };
  return MapEntry(key, result);
}

状态管理

BixatForm 管理三种状态：

1. 启用：表单有效且可以提交。
2. 加载：表单正在提交数据。
3. 禁用：表单无效或被禁用。
4. 完成：提交成功。

可以通过以下方式访问当前状态：

final currentState = bixatForm.state.value;

提交功能

示例代码展示如何处理表单提交：

Future<void> submit() async {
  state.value = BixatFormState.loading;
  await Future.delayed(const Duration(seconds: 3));
  state.value = BixatFormState.done;
  log(data.toString());
  await Future.delayed(const Duration(seconds: 1));
  state.value = BixatFormState.enabled;
}