flutter中的流生成器延迟问题

Question

我有一个流生成器，但它显示了不同的流查询取决于用户的选择。

使用更改选择时存在一个问题，即在获取选择的流Query之间有一个小延迟，因此非常简短地说，上一个查询会立即显示并更改为所选查询。我想知道有没有什么方法可以防止在延迟时间内显示查询。

body: ListView(
children: <Widget>[
select(),// decide buyOrSell
StreamBuilder(
stream: buyOrSell == "buy"
? FirebaseFirestore.instance
.collection("buy")
.doc(widget.profileId)
.collection("barter")
.orderBy('timestamp', descending: true)
.snapshots()
: FirebaseFirestore.instance
.collection("sell")
.doc(widget.profileId)
.collection("barter")
.orderBy('timestamp', descending: true)
.snapshots(),

Answer 1

请参阅StreamBuilder的官方文档：https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html#widgets.StreamBuilder.1

在StreamBuilder构建器方法内部有一个AsyncSnapshot值，它不仅包含流的数据，还包含状态和错误。在构建器方法内部，检查snapshot.hasError和snapshot.state。连接有4种状态：

enum ConnectionState {
/// Not currently connected to any asynchronous computation.
///
/// For example, a [FutureBuilder] whose [FutureBuilder.future] is null.
none,
/// Connected to an asynchronous computation and awaiting interaction.
waiting,
/// Connected to an active asynchronous computation.
///
/// For example, a [Stream] that has returned at least one value, but is not
/// yet done.
active,
/// Connected to a terminated asynchronous computation.
done,
}

您的"；延迟；是由于这些状态之间的切换导致的，因此理想情况下需要为每个状态指定返回值。参考文件中的完整示例：

return Scaffold(
body: ListView(
children: <Widget>[
select(), // decide buyOrSell
StreamBuilder(
stream: buyOrSell == "buy"
? FirebaseFirestore.instance
.collection("buy")
.doc(widget.profileId)
.collection("barter")
.orderBy('timestamp', descending: true)
.snapshots()
: FirebaseFirestore.instance
.collection("sell")
.doc(widget.profileId)
.collection("barter")
.orderBy('timestamp', descending: true)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
List<Widget> children;
if (snapshot.hasError) {
children = <Widget>[
const Icon(
Icons.error_outline,
color: Colors.red,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('Error: ${snapshot.error}'),
),
Padding(
padding: const EdgeInsets.only(top: 8),
child: Text('Stack trace: ${snapshot.stackTrace}'),
),
];
} else {
switch (snapshot.connectionState) {
case ConnectionState.none:
children = const <Widget>[
Icon(
Icons.info,
color: Colors.blue,
size: 60,
),
Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Select a lot'),
)
];
break;
case ConnectionState.waiting:
children = const <Widget>[
SizedBox(
child: CircularProgressIndicator(),
width: 60,
height: 60,
),
Padding(
padding: EdgeInsets.only(top: 16),
child: Text('Awaiting bids...'),
)
];
break;
case ConnectionState.active:
children = <Widget>[
const Icon(
Icons.check_circle_outline,
color: Colors.green,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('$${snapshot.data}'),
)
];
break;
case ConnectionState.done:
children = <Widget>[
const Icon(
Icons.info,
color: Colors.blue,
size: 60,
),
Padding(
padding: const EdgeInsets.only(top: 16),
child: Text('$${snapshot.data} (closed)'),
)
];
break;
}
}
return Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: children,
);
},
),
],
),
);