我需要使用默认 Flutter 的 SearchPage 获得 Google Places 搜索建议,每当用户开始输入时,我需要提供自动完成建议,并且我使用 FutureBuilder
异步实现此目的,现在的问题是,我需要在 500 毫秒或更长时间内消除搜索请求的分派(dispatch),而不是在用户仍在键入时浪费大量请求
总结一下我到目前为止所做的事情:
1) 在我的小部件中,我调用了
showSearch(context: context, delegate: _delegate);
2) 我的委托(delegate)看起来像这样:
class _LocationSearchDelegate extends SearchDelegate<Suggestion> {
@override
List<Widget> buildActions(BuildContext context) {
return <Widget>[
IconButton(
tooltip: 'Clear',
icon: const Icon(Icons.clear),
onPressed: () {
query = '';
showSuggestions(context);
},
)
];
}
@override
Widget buildLeading(BuildContext context) => IconButton(
tooltip: 'Back',
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
@override
Widget buildResults(BuildContext context) {
return FutureBuilder<List<Suggestion>>(
future: GooglePlaces.getInstance().getAutocompleteSuggestions(query),
builder: (BuildContext context, AsyncSnapshot<List<Suggestion>> suggestions) {
if (!suggestions.hasData) {
return Text('No results');
}
return buildLocationSuggestions(suggestions.data);
},
);
}
@override
Widget buildSuggestions(BuildContext context) {
return buildResults(context);
}
Widget buildLocationSuggestions(List<Suggestion> suggestions) {
return ListView.builder(
itemBuilder: (context, index) => ListTile(
leading: Icon(Icons.location_on),
title: Text(suggestions[index].text),
onTap: () {
showResults(context);
},
),
itemCount: suggestions.length,
);
}
}
3-我需要限制/去抖动搜索直到 xxx 毫秒过去
我有一个想法,是否有一种简单的方法可以将 FutureBuilder 转换为 Stream 并使用 Stream 构建器(我在一些文章中读到它支持去抖动)?
**我知道有一些像 TypeAhead
这样的第 3 方 AutoComplete 小部件正在这样做(从头开始),但我现在不想使用它。
最佳答案
更新:我为此制作了一个适用于回调、 future 和/或流的包。 https://pub.dartlang.org/packages/debounce_throttle .使用它可以简化下面描述的两种方法,尤其是基于流的方法,因为不需要引入新的类。这是一个 dartpad 示例 https://dartpad.dartlang.org/e4e9c07dc320ec400a59827fff66bb49 .
至少有两种方法可以做到这一点,Future
基于方法,以及 Stream
基于的方法。自从内置去抖动功能以来,使用 Streams 也出现了类似的问题,但让我们看看这两种方法。
面向 future 的方法
Future
s 本身不可取消,但底层 Timer
他们使用的是。这是一个实现基本去抖动功能的简单类,使用回调而不是 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
.这是一个消除 List<Suggestion>
的示例。调用 Google 的 API。
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());
}
},
);
}
}
基于流的方法
由于相关数据来自 Future 而不是 Stream,我们必须设置一个类来处理查询输入和建议输出。幸运的是,它可以自然地处理输入流的去抖动。
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();
}
}
要在 Flutter 中使用这个 Controller 类,让我们创建一个 StatefulWidget 来管理 Controller 的状态。这部分包括对您的函数的调用 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
string 来自,但要完成连接,您可以调用 controller.query.add(newQuery)
其余的由 StreamBuilder 处理。
结论
由于您使用的 API 产生 Futures,因此使用该方法似乎更简单一些。缺点是 Debouncer 类的开销,并添加了一个 Completer 以将其绑定(bind)到 FutureBuilder。
流方法很流行,但也包含相当多的开销。如果您不熟悉,正确创建和处理流可能会很棘手。
https://stackoverflow.com/questions/52915035/