在Flutter中实现输入框的防抖功能,通常是为了减少用户输入时触发的事件数量,特别是在进行网络请求时。防抖(Debounce)意味着在用户停止输入一段时间后才触发事件。以下是实现输入框防抖的一种方法:
1、使用Debounce
类:你可以创建一个Debounce
类来控制事件的触发。
class Debounce {
Timer? _timer;
void setDuration(Duration duration, VoidCallback callback) {
_timer?.cancel();
_timer = Timer(duration, callback);
}
}
2、在Flutter的TextField
控件中使用Debounce
:
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
final myController = TextEditingController();
final debounce = Debounce();
String _searchText = '';
@override
void dispose() {
myController.dispose();
debounce._timer?.cancel();
super.dispose();
}
void _onSearch() {
// 这里是你处理搜索逻辑的地方
setState(() {
_searchText = myController.text;
});
}
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
TextField(
controller: myController,
onChanged: (value) {
debounce.setDuration(Duration(milliseconds: 300), () {
_onSearch();
});
},
decoration: InputDecoration(
hintText: 'Type something...',
),
),
Text('You typed: $_searchText'),
],
);
}
}