Flutter自定义钩子插件leancode_hooks的使用

leancode_hooks 是一个收集了常用 Hooks 的 Flutter 插件，旨在提高可发现性和版本一致性。该插件基于 flutter_hooks 构建，并提供了一系列实用的 Hooks。

安装和导入

首先，在你的 pubspec.yaml 文件中添加 leancode_hooks 依赖：

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

然后在 Dart 文件中导入该库：

import 'package:leancode_hooks/leancode_hooks.dart';

由于 leancode_hooks 导出了 flutter_hooks，因此你不需要单独导入 flutter_hooks。

常用 Hooks

以下是一些常用的 Hooks 及其简单介绍：

• useBloc: 使用 BLoC 模式管理状态。
• useBlocListener: 监听 BLoC 状态变化。
• useBlocState: 获取当前 BLoC 状态。
• useDebounce: 实现防抖动功能。
• useDeclarativeTextEditingController: 创建声明式的文本编辑控制器。
• useDisposable: 管理资源释放。
• useFocused: 监听焦点变化。
• usePostFrameEffect: 在帧绘制后执行回调。
• useStreamListener: 监听流的变化。
• useSyncedTextEditingController: 同步文本编辑控制器。
• useTapGestureRecognizer: 创建点击手势识别器。
• useThrottle: 实现节流功能。

示例 Demo

以下是一个简单的示例，展示如何使用 useDebounce 和 useStreamListener 来实现搜索框的防抖动和流监听功能。

示例代码

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

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

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

class SearchPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    final textController = useTextEditingController();
    final debouncedQuery = useState('');

    // 使用 useDebounce 防抖动
    useDebounce(() {
      debouncedQuery.value = textController.text;
    }, [textController.text], Duration(milliseconds: 300));

    // 模拟搜索结果流
    final searchResults = useMemoizedStream(
      () => Stream.periodic(Duration(seconds: 1), (_) => "Search Result for ${debouncedQuery.value}")
          .takeWhile((result) => debouncedQuery.value.isNotEmpty),
      initialData: null,
      keys: [debouncedQuery.value],
    ).data;

    // 使用 useStreamListener 监听流变化
    useStreamListener(searchResults, (value) {
      print('Received new result: $value');
    });

    return Scaffold(
      appBar: AppBar(
        title: Text('Search with Debounce'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: textController,
              decoration: InputDecoration(
                labelText: 'Search',
                border: OutlineInputBorder(),
              ),
            ),
            SizedBox(height: 20),
            if (searchResults != null)
              Expanded(
                child: ListView.builder(
                  itemCount: 1,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title: Text(searchResults.toString()),
                    );
                  },
                ),
              )
          ],
        ),
      ),
    );
  }
}

说明

1. useDebounce: 用于防止用户频繁输入导致不必要的搜索请求。这里设置为 300 毫秒的防抖时间。
2. useStreamListener: 监听模拟的搜索结果流，每当有新结果时打印到控制台。
3. TextField: 用户输入搜索关键词的地方，通过 useTextEditingController 控制文本内容。

通过这个示例，你可以看到如何利用 leancode_hooks 提供的 Hooks 来简化代码逻辑并提升用户体验。希望这些信息对你有所帮助！