在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 = '';@overridevoid dispose() {myController.dispose();debounce._timer?.cancel();super.dispose();}void _onSearch() {// 这里是你处理搜索逻辑的地方setState(() {_searchText = myController.text;});}@overrideWidget 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'),],);}
}