Flutter表单管理插件form_bloc的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter表单管理插件form_bloc的使用

简介

form_bloc 是一个基于 BLoC 模式的 Flutter 表单状态管理库。它可以帮助你将表单的状态和业务逻辑与用户界面分离,从而提高代码的可维护性和可测试性。

主要特点

  • 同步字段验证
  • 异步字段验证
  • 轻松加载和初始化
  • 向导/步骤表单
  • 提交进度
  • 成功/失败响应
  • 可序列化表单
  • 提交错误到字段
  • 动态字段
  • 条件字段
  • 列表字段
  • 组字段
  • CRUD 支持
  • 内置精美小部件

文档和教程

示例

维护者

示例图片

form_bloc1 form_bloc2 form_bloc3
form_bloc4 form_bloc5 form_bloc6

示例代码

以下是一个简单的登录表单示例,展示了如何使用 form_bloc 来管理表单状态和验证。

main.dart

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

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

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

class LoginForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login Form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: LoginFormBlocProvider(
          formBloc: LoginFormBloc(),
          child: Builder(
            builder: (context) {
              final loginFormBloc = context.read<LoginFormBloc>();
              return Column(
                children: <Widget>[
                  TextFieldBlocBuilder(
                    textFieldBloc: loginFormBloc.email,
                    decoration: InputDecoration(labelText: 'Email'),
                  ),
                  SizedBox(height: 16.0),
                  TextFieldBlocBuilder(
                    textFieldBloc: loginFormBloc.password,
                    decoration: InputDecoration(labelText: 'Password'),
                    obscureText: true,
                  ),
                  SizedBox(height: 16.0),
                  ElevatedButton(
                    onPressed: loginFormBloc.submit,
                    child: Text('Submit'),
                  ),
                  SizedBox(height: 16.0),
                  FormBlocLoading(
                    submitting: loginFormBloc.submitting,
                    child: CircularProgressIndicator(),
                  ),
                  SizedBox(height: 16.0),
                  FormBlocSuccess(
                    showWhen: (successResponse) => successResponse != null,
                    child: Text('Login successful!'),
                  ),
                  FormBlocFailure(
                    showWhen: (failureResponse) => failureResponse != null,
                    child: Text('Login failed!'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

class LoginFormBloc extends FormBloc<String, String> {
  final email = TextFieldBloc<dynamic>(
    validators: [
      FieldBlocValidators.required,
      FieldBlocValidators.email,
    ],
  );

  final password = TextFieldBloc<dynamic>(
    validators: [
      FieldBlocValidators.required,
    ],
  );

  LoginFormBloc() {
    addFieldBlocs(
      fieldBlocs: [
        email,
        password,
      ],
    );
  }

  @override
  void onSubmitting() async {
    try {
      // Simulate a network request
      await Future.delayed(Duration(seconds: 2));
      emitSuccess(canSubmitAgain: true);
    } catch (e) {
      emitFailure(failureResponse: e.toString());
    }
  }
}

说明

  1. 导入依赖:首先导入 form_bloc 包。
  2. 创建 LoginFormBloc:定义一个 LoginFormBloc 类,继承自 FormBloc,并添加两个 TextFieldBloc 实例来管理邮箱和密码字段。
  3. 表单字段验证:为每个字段添加验证器,例如 requiredemail 验证器。
  4. 提交处理:在 onSubmitting 方法中处理表单提交逻辑,模拟网络请求,并根据结果发出成功或失败事件。
  5. UI 层:使用 LoginFormBlocProvider 提供 LoginFormBloc 实例,并使用 TextFieldBlocBuilderElevatedButtonFormBlocLoadingFormBlocSuccessFormBlocFailure 小部件来构建表单界面。

通过这种方式,你可以轻松地管理和验证复杂的表单,同时保持代码的清晰和模块化。希望这个示例对你有所帮助!


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

1 回复

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


在Flutter中,form_bloc 是一个强大的库,用于管理表单状态和业务逻辑。它基于 BLoC(Business Logic Component)架构模式,使得表单状态管理更加清晰和可维护。下面是一个简单的示例,展示了如何使用 form_bloc 来管理一个登录表单。

首先,确保你已经在 pubspec.yaml 文件中添加了 form_bloc 依赖:

dependencies:
  flutter:
    sdk: flutter
  form_bloc: ^x.y.z  # 请替换为最新版本号

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

1. 定义表单字段和表单状态

首先,我们需要定义表单字段和表单状态。在这个例子中,我们有一个登录表单,包含用户名和密码字段。

import 'package:form_bloc/form_bloc.dart';

// 定义表单字段
class LoginFormFields extends FormFields<LoginFormState> {
  @override
  List<FormField<LoginFormState>> get fields => [
        FormField<LoginFormState>(
          name: 'username',
          validator: (state) {
            if (state.username!.isEmpty) {
              return 'Username is required';
            }
            return null;
          },
          builder: (state, _) => TextFormField(
            initialValue: state.username,
            decoration: InputDecoration(labelText: 'Username'),
            onChanged: (value) => context.read<FormBloc>().change(LoginFormState(username: value, password: state.password)),
          ),
        ),
        FormField<LoginFormState>(
          name: 'password',
          validator: (state) {
            if (state.password!.isEmpty) {
              return 'Password is required';
            }
            return null;
          },
          obscureText: true,
          builder: (state, _) => TextFormField(
            initialValue: state.password,
            decoration: InputDecoration(labelText: 'Password'),
            onChanged: (value) => context.read<FormBloc>().change(LoginFormState(username: state.username, password: value)),
          ),
        ),
      ];
}

// 定义表单状态
class LoginFormState extends Equatable {
  final String? username;
  final String? password;

  LoginFormState({this.username, this.password});

  @override
  List<Object?> get props => [username, password];
}

2. 创建 FormBloc

接下来,我们需要创建一个 FormBloc 来管理表单状态。

import 'package:bloc/bloc.dart';
import 'package:form_bloc/form_bloc.dart';

class LoginFormBloc extends FormBloc<LoginFormState> {
  LoginFormBloc() : super(LoginFormFields(), LoginFormState());

  @override
  Stream<FormBlocState<LoginFormState>> onSubmit() async* {
    if (state.isValid) {
      // 在这里处理表单提交,例如发送登录请求
      yield FormBlocState.submissionSuccess(state);
    } else {
      yield FormBlocState.submissionFailure(state);
    }
  }
}

3. 使用 FormBloc 在 UI 中显示表单

最后,我们在 Flutter UI 中使用 FormBlocBuilder 来构建表单。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:form_bloc/form_bloc.dart';
import 'login_form_bloc.dart'; // 假设这个文件包含上面的 LoginFormBloc 和 LoginFormFields 定义

void main() {
  runApp(BlocProvider<LoginFormBloc>(
    create: (_) => LoginFormBloc(),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Login Form')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: FormBlocListener<LoginFormBloc, LoginFormState>(
            listener: (context, state) {
              if (state is FormBlocStateSubmissionSuccess<LoginFormState>) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Login successful')));
              } else if (state is FormBlocStateSubmissionFailure<LoginFormState>) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('Login failed')));
              }
            },
            child: FormBlocBuilder<LoginFormBloc, LoginFormState>(
              builder: (context, state) {
                return Column(
                  children: [
                    ...state.fields,
                    SizedBox(height: 24),
                    ElevatedButton(
                      onPressed: state.isSubmissionInProgress
                          ? null
                          : () => context.read<LoginFormBloc>().submit(),
                      child: Text('Login'),
                    ),
                  ],
                );
              },
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个简单的登录表单,并使用 form_bloc 来管理表单状态。当用户提交表单时,会根据表单的有效性显示相应的提示信息。

这个示例展示了 form_bloc 的基本用法,但 form_bloc 还支持更多高级功能,如动态字段、异步验证等,你可以根据需求进一步扩展。

回到顶部