如何在 Dart 2 中限制 TextEditingController 偵聽器事件 - Flutter

Question

我想知道是否有一些我可能錯過的內置功能。 我試圖找到類似的東西，但我發現的唯一包（油門）不再支持 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);
    });

對此有何想法？

Answer 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