debounce_throttle: ^2.0.0
使用:
// ignore_for_file: avoid_print
import 'package:flutter/material.dart';
import 'package:debounce_throttle/debounce_throttle.dart';
void main() {
runApp(const MaterialApp(
home: DemoPage(),
));
}
class DemoPage extends StatefulWidget {
const DemoPage({super.key});
@override
State<DemoPage> createState() => _DemoPageState();
}
class _DemoPageState extends State<DemoPage> {
// 输入框的防抖
final _searchController = TextEditingController();
final _searchDebouncer =
Debouncer(const Duration(milliseconds: 1000), initialValue: "");
// 监听按钮的防抖
final _clickController = MaterialStatesController();
final _clickDebouncer =
Debouncer(const Duration(milliseconds: 1000), initialValue: "");
// 普通函数的防抖
final _anyDebouncer =
Debouncer(const Duration(milliseconds: 1000), initialValue: "");
void anyFn() {
print("anyFn触发");
_anyDebouncer.notify("随便什么值");
}
@override
void initState() {
super.initState();
// 输入框的防抖
_searchDebouncer.values.listen((search) => fn1(search));
_searchController.addListener(() {
print("输入框改变了值:${_searchController.text}");
_searchDebouncer.value = _searchController.text;
});
// 监听按钮的防抖
_clickDebouncer.values.listen((_) => fn2());
_clickController.addListener(() {
// 只有当按钮pressed时,才触发防抖,而非hover等
if (_clickController.value.contains(MaterialState.pressed)) {
print("点击了按钮");
_clickDebouncer.notify("随便什么值");
}
});
// 某个函数的防抖
_anyDebouncer.values.listen((_) => fn3());
}
@override
void dispose() {
_searchDebouncer.cancel();
_clickDebouncer.cancel();
_anyDebouncer.cancel();
_searchController.dispose();
_clickController.dispose();
super.dispose();
}
void fn1(String query) {
print("输入框防抖函数触发:调用接口等。。。");
}
void fn2() {
print("按钮防抖函数触发:调用接口等。。。");
}
void fn3() {
print("any函数触发:调用接口等。。。");
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('防抖案例'),
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(10),
child: TextField(
controller: _searchController,
),
),
ElevatedButton(
statesController: _clickController,
onPressed: () {},
child: const Icon(Icons.access_time_filled_rounded)),
ElevatedButton(
onPressed: anyFn, child: const Icon(Icons.access_alarm)),
],
),
);
}
}