Flutter表单管理插件stx_flutter_form_bloc的使用

当然，以下是一个使用 stx_flutter_form_bloc 插件管理 Flutter 表单的示例代码。stx_flutter_form_bloc 是一个用于管理 Flutter 表单状态的强大库，它基于 Bloc 状态管理架构。

首先，确保你已经在 pubspec.yaml 文件中添加了 stx_flutter_form_bloc 依赖：

dependencies:
  flutter:
    sdk: flutter
  stx_flutter_form_bloc: ^最新版本号

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

接下来，让我们编写一个示例，展示如何使用 stx_flutter_form_bloc 来管理一个简单的登录表单。

1. 创建 FormBloc 和 FormState

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

import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:stx_flutter_form_bloc/stx_flutter_form_bloc.dart';

part 'login_form_bloc.g.dart';

class LoginFormField {
  final String key;
  final String label;
  final FormFieldValidator<String> validator;

  const LoginFormField({
    required this.key,
    required this.label,
    required this.validator,
  });
}

class LoginFormBloc extends FormBloc<LoginFormState> {
  LoginFormBloc() : super(LoginFormState.initial());

  @override
  List<LoginFormField> get fields => [
        LoginFormField(
          key: 'username',
          label: 'Username',
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Username is required';
            }
            return null;
          },
        ),
        LoginFormField(
          key: 'password',
          label: 'Password',
          validator: (value) {
            if (value == null || value.isEmpty) {
              return 'Password is required';
            }
            return null;
          },
        ),
      ];

  @override
  Stream<LoginFormState> onSubmit(LoginFormState state) async* {
    if (state.isValid) {
      // Handle successful submission
      yield state.copyWith(isSubmitting: true);
      // Simulate async operation
      await Future.delayed(const Duration(seconds: 1));
      yield state.copyWith(isSubmitting: false, isSubmitted: true);
    }
  }
}

@freezed
abstract class LoginFormState with _$LoginFormState {
  const factory LoginFormState({
    required bool isInitial,
    required Map<String, String?> errors,
    required bool isSubmitting,
    required bool isSubmitted,
  }) = _LoginFormState;

  factory LoginFormState.initial() => LoginFormState(
        isInitial: true,
        errors: {},
        isSubmitting: false,
        isSubmitted: false,
      );
}

2. 生成代码

使用 build_runner 生成 Freezed 和 JsonSerializable 代码：

flutter pub run build_runner build

3. 创建 UI 表单

接下来，我们使用 FormBlocBuilder 来构建表单 UI。

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:stx_flutter_form_bloc/stx_flutter_form_bloc.dart';
import 'login_form_bloc.dart';

void main() {
  runApp(
    BlocProvider<LoginFormBloc>(
      create: (context) => LoginFormBloc(),
      child: MaterialApp(
        home: LoginFormScreen(),
      ),
    ),
  );
}

class LoginFormScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login Form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormBlocListener<LoginFormBloc, LoginFormState>(
          listener: (context, state) {
            if (state.isSubmitted) {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Form submitted successfully!')),
              );
            }
          },
          child: FormBlocBuilder<LoginFormBloc, LoginFormState>(
            builder: (context, state, formBloc) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  TextFieldBlocBuilder<String>(
                    formBloc: formBloc,
                    fieldKey: 'username',
                    decoration: InputDecoration(labelText: 'Username'),
                    validator: (value) => state.errors['username'],
                  ),
                  const SizedBox(height: 16),
                  TextFieldBlocBuilder<String>(
                    formBloc: formBloc,
                    fieldKey: 'password',
                    decoration: InputDecoration(labelText: 'Password'),
                    obscureText: true,
                    validator: (value) => state.errors['password'],
                  ),
                  const SizedBox(height: 24),
                  ElevatedButton(
                    onPressed: state.isValid ? () => formBloc.submit() : null,
                    child: Text('Submit'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

4. 运行应用

现在，你可以运行你的 Flutter 应用，并看到一个包含用户名和密码字段的登录表单。当你提交表单时，如果字段验证通过，会显示一个 Snackbar 提示表单提交成功。

这个示例展示了如何使用 stx_flutter_form_bloc 插件来管理 Flutter 表单的状态和验证。你可以根据需要扩展这个示例，添加更多的字段和验证逻辑。