Flutter表单管理插件reactive_forms_lbc的使用

Flutter表单管理插件reactive_forms_lbc的使用

reactive_forms_lbc 是一个为 reactive_forms 包设计的控件集，采用了类似于 bloc 库的监听器/构建器/消费者模式。

可用的控件：

监听器（Listeners）

• ReactiveFormControlStatusListener
• ReactiveFormControlFocusListener
• ReactiveFormControlTouchListener
• ReactiveFormControlValueListener

构建器（Builders）

• ReactiveFormControlValueBuilder
• ReactiveFormControlStatusBuilder
• ReactiveFormControlTouchBuilder
• ReactiveFormControlFocusBuilder

消费者（Consumers）

• ReactiveFormControlValueConsumer
• ReactiveFormControlStatusConsumer
• ReactiveFormControlTouchConsumer
• ReactiveFormControlFocusConsumer

入门指南

运行示例项目以查看其工作原理。

以下是完整的示例代码，展示如何使用 reactive_forms_lbc 插件：

import 'package:flutter/material.dart';
import 'package:reactive_forms/reactive_forms.dart';
import 'package:reactive_forms_lbc/reactive_forms_lbc.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _counter = 0;

  FormGroup buildForm() => fb.group({
        'input': FormControl<String>(value: null),
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: SafeArea(
          child: Column(
            children: [
              MyApp1(
                c: _counter,
              ),
              TextButton(
                onPressed: () {
                  setState(() {
                    _counter++;
                  });
                },
                child: const Text('Increment counter'),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class CitiesService {
  static final List<String> cities = [
    'Beirut',
    'Damascus',
    'San Fransisco',
    'Rome',
    'Los Angeles',
    'Madrid',
    'Bali',
    'Barcelona',
    'Paris',
    'Bucharest',
    'New York City',
    'Philadelphia',
    'Sydney',
  ];

  static List<String> getSuggestions(String query) {
    List<String> matches = <String>[];
    matches.addAll(cities);

    matches.retainWhere((s) => s.toLowerCase().contains(query.toLowerCase()));
    return matches;
  }
}

class MyApp1 extends StatelessWidget {
  final int c;

  const MyApp1({Key? key, required this.c}) : super(key: key);

  FormGroup buildForm() => fb.group({
        'input': FormControl<String>(value: null),
        'input2': FormControl<String>(value: null),
      });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ReactiveFormBuilder(
      form: buildForm,
      builder: (context, form, child) {
        return Column(
          children: [
            // 创建两个输入框
            ReactiveTextField(
              decoration: const InputDecoration(labelText: 'Input'), // 输入框提示文字
              formControlName: 'input', // 绑定到form中的'input'
            ),
            ReactiveTextField(
              decoration: const InputDecoration(labelText: 'Input2'), // 输入框提示文字
              formControlName: 'input2', // 绑定到form中的'input2'
            ),
            // 使用ReactiveFormControlValueConsumer来显示输入值
            ReactiveFormControlValueConsumer<String>(
              builder: (context, control) {
                return Text(control.value ?? ''); // 显示输入值
              },
              listener: (context, control) {
                // print(control.value); // 可选：打印输入值
              },
              buildWhen: (control, prev, curr) {
                debugPrint('Focus => $prev -- c => $curr'); // 打印调试信息
                return (curr?.length ?? 0) <= 6; // 当输入长度小于等于6时更新
              },
              formControl: form.controls['input']! as FormControl<String>, // 绑定到'input'
            ),
            const SizedBox(height: 16), // 添加间距
            ElevatedButton(
              child: const Text('Disable'), // 按钮文本
              onPressed: () {
                (form.controls['input']! as AbstractControl<String>)
                    .markAsDisabled(); // 禁用输入框
                (form.controls['input']! as AbstractControl<String>)
                    .markAsEnabled(); // 启用输入框
              },
            ),
            ElevatedButton(
              child: const Text('Sign Up'), // 按钮文本
              onPressed: () {
                if (form.valid) { // 如果表单有效
                  // ignore: avoid_print
                  print(form.value); // 打印表单值
                } else {
                  form.markAllAsTouched(); // 标记所有控件已触碰
                }
              },
            ),
          ],
        );
      },
    );
  }
}