Flutter表单管理插件bloc_form的使用

BlocForm 是一个用于分离表单逻辑与布局代码的插件。它可以帮助开发者更清晰地组织表单相关的业务逻辑。

安装 BlocForm

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

dependencies:
  bloc_form: ^1.0.0

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

使用 BlocForm 的完整示例

以下是一个完整的示例，展示了如何使用 BlocForm 来管理表单。

示例代码

// 导入必要的包
import 'package:flutter/material.dart';
import 'package:bloc_form/bloc_form.dart'; // 引入 BlocForm

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 创建一个 FormBloc 实例
  final _formBloc = FormBloc();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: BlocForm(
          formBloc: _formBloc, // 将 FormBloc 注入到 BlocForm 中
          builder: (context, child) {
            return Column(
              children: [
                TextFormField(
                  decoration: const InputDecoration(labelText: '用户名'),
                  onChanged: (value) {
                    _formBloc.setField('username', value); // 设置表单字段
                  },
                ),
                TextFormField(
                  decoration: const InputDecoration(labelText: '密码'),
                  obscureText: true,
                  onChanged: (value) {
                    _formBloc.setField('password', value); // 设置表单字段
                  },
                ),
                ElevatedButton(
                  onPressed: () {
                    // 提交表单
                    if (_formBloc.validate()) {
                      print('表单验证通过');
                    } else {
                      print('表单验证失败');
                    }
                  },
                  child: const Text('提交'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

// 定义一个简单的 FormBloc 类
class FormBloc extends Bloc<FormEvent, FormState> {
  final _fields = <String, dynamic>{};

  [@override](/user/override)
  Stream<FormState> mapEventToState(FormEvent event) async* {
    if (event is SetFieldEvent) {
      _fields[event.field] = event.value;
      yield FormState.success(_fields);
    } else if (event is ValidateEvent) {
      bool isValid = true;
      for (var field in _fields.keys) {
        if (_fields[field].toString().isEmpty) {
          isValid = false;
          break;
        }
      }
      yield FormState(isValid ? FormStatus.success : FormStatus.failure);
    }
  }

  void setField(String field, String value) {
    add(SetFieldEvent(field, value));
  }

  bool validate() {
    add(ValidateEvent());
    return currentState.status == FormStatus.success;
  }
}

// 表单状态类
enum FormStatus { success, failure }

class FormState {
  final Map<String, dynamic> fields;
  final FormStatus status;

  FormState(this.fields, this.status);
}

// 表单事件类
abstract class FormEvent {}

class SetFieldEvent extends FormEvent {
  final String field;
  final dynamic value;

  SetFieldEvent(this.field, this.value);
}

class ValidateEvent extends FormEvent {}