如何在 Dart 2 中限制 TextEditingController 侦听器事件 - Flutter

Posted 2023-02-23

【中文标题】如何在 Dart 2 中限制 TextEditingController 侦听器事件 - Flutter

【英文标题】：How to throttle TextEditingController listener events in Dart 2 - Flutter

【发布时间】：2019-06-16 08:56:46

【问题描述】：

我想知道是否有一些我可能错过的内置功能。我试图找到类似的东西，但我找到的唯一包 (throttle) 不再支持 Dart 2

这是我想要节流的代码部分

final TextEditingController _filter = new TextEditingController();
String _searchText = "";

_filter.addListener(() 
      if (_filter.text.isEmpty) 
        setState(() 
          _searchText = "";
        );
       else 
        setState(() 
          _searchText = _filter.text;
        );
      
      //This action is being fired TOO many times :(
      widget.onUpdateSearchTerm(_searchText);
    );

对此有什么想法吗？

【参考方案1】：

我会使用来自rxdart 的throttle 或debounce

在 rxdart 0.22.x 上使用 Observable

final TextEditingController _filter = new TextEditingController();
String _searchText = "";
final _textUpdates = StreamController<String>();

_filter.addListener(() => _textUpdates.add(_filter.text));

Observable(_textUpdates.stream)
.throttle(const Duration(milliseconds: 700))
.forEach((s) 
  if (s.isEmpty) 
    setState(() 
      _searchText = "";
    );
   else 
    setState(() 
      _searchText = s;
    );
  
  //This action is being fired TOO many times :(
  widget.onUpdateSearchTerm(_searchText);
);

在 rxdart 0.23.x 及更高版本上

final TextEditingController _filter = new TextEditingController();
String _searchText = "";
final _textUpdates = StreamController<String>();

_filter.addListener(() => _textUpdates.add(_filter.text));

_textUpdates.stream
.throttle(const Duration(milliseconds: 700))
.forEach((s) 
  if (s.isEmpty) 
    setState(() 
      _searchText = "";
    );
   else 
    setState(() 
      _searchText = s;
    );
  
  //This action is being fired TOO many times :(
  widget.onUpdateSearchTerm(_searchText);
);

另见

https://pub.dartlang.org/packages/rxdart https://pub.dartlang.org/documentation/rxdart/latest/rx/Observable/throttle.html https://pub.dartlang.org/documentation/rxdart/latest/rx/Observable/debounce.html

【讨论】：

工作就像一个魅力@@Günter Zöchbauer。非常感谢。但是，仅对 _filter.addListener(() => _textUpdates(_filter.text)); 行进行了一次更正，抱怨它不是 Function。然后我改为 _filter.addListener(() => _textUpdates.add(_filter.text)); 我建议你更新答案。除此之外，一切都很好！

谢谢 - 已修复。在没有 IDE 的情况下编写代码总是有点挑战：D