如何在Flutter搜索页面小部件中消除搜索建议

Update:我为此制作了一个用于回调、期货和/或流的包.https://pub.dartlang.org/packages/debounce_throttle美元.使用它可以简化下面描述的两种方法，特别是基于流的方法，因为不需要引入新的类.这里有一个dart https://dartpad.dartlang.org/e4e9c07dc320ec400a59827fff66bb49的例子.

至少有两种方法可以做到这一点，基于Future的方法和基于Stream的方法.由于内置了debounce 功能，类似的问题也被指向使用流，但让我们看看这两种方法.

Future-based approach

Future本身是不可取消的，但它们使用的基本Timer是可取消的.下面是一个简单的类，它实现了基本的go Bounce功能，使用回调而不是future .

class Debouncer<T> {
  Debouncer(this.duration, this.onValue);
  final Duration duration;
  void Function(T value) onValue;
  T _value;
  Timer _timer;
  T get value => _value;
  set value(T val) {
    _value = val;
    _timer?.cancel();
    _timer = Timer(duration, () => onValue(_value));
  }  
}

然后使用它(与Dartpad兼容):

import 'dart:async';

void main() {      
  final debouncer = Debouncer<String>(Duration(milliseconds: 250), print);
  debouncer.value = '';
  final timer = Timer.periodic(Duration(milliseconds: 200), (_) {
    debouncer.value += 'x';
  });
  /// prints "xxxxx" after 1250ms.
  Future.delayed(Duration(milliseconds: 1000)).then((_) => timer.cancel()); 
}

现在要将回调变成future ，请使用Completer.下面的示例揭穿了对Google API的List<Suggestion>调用.

void main() {
  final completer = Completer<List<Suggestion>>();  
  final debouncer = Debouncer<String>(Duration(milliseconds: 250), (value) async {        
    completer.complete(await GooglePlaces.getInstance().getAutocompleteSuggestions(value));
  });           

  /// Using with a FutureBuilder.
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Suggestion>>(
      future: completer.future,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return Text(snapshot.data);
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }
}

Stream-based approach个

由于所讨论的数据来自Future而不是Stream，因此我们必须设置一个类来处理查询输入和建议输出.幸运的是，它可以自然地处理输入流的debounce .

class SuggestionsController {
  SuggestionsController(this.duration) {
    _queryController.stream
        .transform(DebounceStreamTransformer(duration))
        .listen((query) async {
      _suggestions.add(
          await GooglePlaces.getInstance().getAutocompleteSuggestions(query));
    });
  }    

  final Duration duration;
  final _queryController = StreamController<String>();
  final _suggestions = BehaviorSubject<List<Suggestion>>();

  Sink<String> get query => _queryController.sink;
  Stream<List<Suggestion>> get suggestions => _suggestions.stream;

  void dispose() {
    _queryController.close();
    _suggestions.close();
  }
}

要在Ffltter中使用这个控制器类，让我们创建一个StatefulWidget来管理控制器的状态.此部分包括对函数buildLocationSuggestions()的调用.

class SuggestionsWidget extends StatefulWidget {
  _SuggestionsWidgetState createState() => _SuggestionsWidgetState();
}

class _SuggestionsWidgetState extends State<SuggestionsWidget> {
  final duration = Duration(milliseconds: 250);
  SuggestionsController controller;

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Suggestion>>(
      stream: controller.suggestions,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return buildLocationSuggestions(snapshot.data);
        } else if (snapshot.hasError) {
          return Text('${snapshot.error}');
        } else {
          return Center(child: CircularProgressIndicator());
        }
      },
    );
  }

  @override
  void initState() {
    super.initState();
    controller = SuggestionsController(duration);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  void didUpdateWidget(SuggestionsWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    controller.dispose();
    controller = SuggestionsController(duration);
  }
}

从您的示例中不清楚第query个字符串来自哪里，但是要完成连接，您可以调用controller.query.add(newQuery)，并且StreamBuilder处理睡觉.

Conclusion个

由于您正在使用的API产生期货yield ，因此使用该方法似乎更简单一些.缺点是Debouler类和添加Completer以将其绑定到FutureBuilder的开销.

流方法很流行，但也包括相当数量的开销.如果您不熟悉，那么正确创建和处理流可能会很棘手.