flutter-防抖

发布于:2024-11-02 ⋅ 阅读:(122) ⋅ 点赞:(0)

在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'),
      ],
    );
  }
}