Flutter搜索提示插件reactive_flutter_typeahead的使用

简介

reactive_flutter_typeahead 是一个基于 flutter_typeahead 的包装器，旨在与 reactive_forms 结合使用。它提供了在表单中实现自动完成和搜索建议的功能。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  reactive_flutter_typeahead: ^latest_version
  reactive_forms: ^latest_version

然后运行 flutter pub get 来安装这些包。

示例代码

以下是一个完整的示例代码，展示了如何使用 reactive_flutter_typeahead 插件：

// ignore_for_file: depend_on_referenced_packages

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Reactive TypeAhead Example',
      home: Scaffold(
        appBar: AppBar(title: const Text('Reactive TypeAhead Example')),
        body: const TypeaheadExample(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final form = FormGroup({
      'city': FormControl<String>(value: 'Los Angeles'),
    });

    return ReactiveForm(
      formGroup: form,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                form.control('city').markAsEnabled();
              },
              child: const Text('Enable'),
            ),
            ElevatedButton(
              onPressed: () {
                form.control('city').markAsDisabled();
              },
              child: const Text('Disable'),
            ),
            ElevatedButton(
                onPressed: () {
                  form.control('city').value = 'New York';
                },
                child: const Text('Set New York')),
            ElevatedButton(
                onPressed: () {
                  form.control('city').value = null;
                },
                child: const Text('Clear value')),
            ReactiveTypeAhead<String, String>(
              formControlName: 'city',
              stringify: (value) => value,
              suggestionsCallback: (pattern) async {
                // Simulated API call
                await Future.delayed(const Duration(milliseconds: 500));
                final cities = [
                  'New York',
                  'Los Angeles',
                  'Chicago',
                  'Houston',
                  'Phoenix',
                ];
                return cities
                    .where((city) =>
                        city.toLowerCase().contains(pattern.toLowerCase()))
                    .toList();
              },
              itemBuilder: (context, city) {
                return ListTile(
                  title: Text(city),
                );
              },
              decoration: const InputDecoration(
                labelText: 'City',
                helperText: 'Start typing a city name',
              ),
            ),
            const SizedBox(height: 16),
            ReactiveFormConsumer(
              builder: (context, form, child) {
                return Text(
                    'Selected city: ${form.control('city').value ?? ''}');
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键点解释

1. 导入必要的包：

   • reactive_flutter_typeahead 和 reactive_forms 是核心依赖。

2. 创建表单：

   • 使用 FormGroup 创建一个包含 city 字段的表单，并设置初始值为 'Los Angeles'。

3. 按钮操作：

   • 提供了几个按钮来启用、禁用、设置默认值和清除 city 字段的值。

4. ReactiveTypeAhead：

   • formControlName 指定关联的表单字段。
   • stringify 将选中的值转换为字符串。
   • suggestionsCallback 是一个异步回调函数，用于获取建议列表。这里模拟了一个 API 调用，返回匹配的城市名称。
   • itemBuilder 定义了每个建议项的 UI。
   • decoration 设置了输入框的样式和提示信息。

5. 显示选中的城市：

   • 使用 ReactiveFormConsumer 监听表单变化，并显示当前选中的城市。

通过以上步骤，你可以在 Flutter 应用中轻松实现带有搜索建议的表单输入框。希望这个示例能帮助你更好地理解和使用 reactive_flutter_typeahead 插件。