Flutter输入防抖插件debounce_controller的使用

Flutter输入防抖插件debounce_controller的使用

DebounceController

DebounceController 是一个 Flutter 包装器，提供了简单且强大的文本输入防抖功能，并支持异步操作。它基于 GetX 包进行响应状态管理，使您能够轻松地在您的 Flutter 应用程序中集成防抖功能。

特性

• 防抖文本输入：防止频繁调用函数，当用户在输入框中输入时。
• 异步操作支持：处理复杂的操作，如 API 请求等。
• 多控制器支持：通过唯一的标签创建和管理多个 DebounceController 实例。
• 错误处理：自定义错误处理，支持回调。
• 响应状态管理：基于 GetX 提供响应式体验。

安装

将以下内容添加到您的 pubspec.yaml 文件中：

dependencies:
  debounce_controller: ^latest_version
  get: ^latest_version

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

使用

1. 导入包

import 'package:debounce_controller/debounce_controller.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';

1. 创建 DebounceController 您可以使用 Get.put 创建 DebounceController 实例，并通过可选的标签来创建多个实例：

final searchController1 = Get.put(
  () => DebounceController<String>(
    futureOperation: _searchOperation,
  ),
  tag: 'searchController1',
);

1. 实现异步操作 DebounceController 需要一个 Future<List<T>> Function(TextEditingController) 来处理文本输入：

Future<List<String>> _searchOperation(TextEditingController controller) async {
  await Future.delayed(Duration(seconds: 1)); // 模拟网络延迟
  return List.generate(5, (index) => 'Result ${index + 1} for "${controller.text}"');
}

1. 构建 UI 在 UI 中使用 DebounceController 反应数据加载状态：

Obx(() {
  if (searchControllerloading.value) {
    return CircularProgressIndicator();
  }
  return Expanded(
    child: ListView.builder(
      itemCount: searchControllerdata.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(searchControllerdata[index].toString()),
        );
      },
    ),
  );
}),

1. 完整示例 以下是 main.dart 的中的完整示例代码：

import 'package:debounce_controller/debounce_controller.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      title: 'DebounceController Example',
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    // 创建多个 `DebounceController` 实例并使用标签。
    final searchController1 = Get.put(
      DebounceController<String>(
        futureOperation: _searchOperation,
      ),
      tag: 'searchController',
    );

    final searchController2 = Get.put(
      DebounceController<String>(
        futureOperation: _searchOperation,
      ),
      tag: 'searchController',
    );

    return Scaffold(
      appBar: AppBar(title: const Text('DebounceController Example')),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextFormField(
              controller: searchControllertextEditingController,
              decoration: const InputDecoration(
                labelText: 'Search 1',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              controller: searchControllertextEditingController,
              decoration: const InputDecoration(
                labelText: 'Search 2',
                border: OutlineInputBorder(),
              ),
            ),
          ),
          Obx(() {
            if (searchControllerloading.value) {
              return const CircularProgressIndicator();
            }
            return Expanded(
              child: ListView.builder(
                itemCount: searchControllerdata.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(searchControllerdata[index].toString()),
                  );
                },
              ),
            );
          }),
        ],
      ),
    );
  }

  // 示例异步搜索操作，替换为实际实现。
  Future<List<String>> _searchOperation(
      TextEditingController controller) async {
    await Future.delayed(const Duration(seconds: 1)); // 模拟网络延迟
    return List.generate(
        5, (index) => 'Result ${index + 1} for "${controller.text}"');
  }
}

1. 错误处理 可以使用 onError 参数处理错误：

final searchController = Get.put(
  () => DebounceController<String>(
    futureOperation: _searchOperation,
    onError: (error, stackTrace) {
      print('Error: $error');
    },
  ),
);