将 .orderBy("date") 添加到 FirebaseFirestore 流查询时，Flutter 嵌套的 GridView.builder 消失

Question

我正在开发一个使用 StreamBuilder 和 GridView.builder 的小部件，它可以完美地填充

stream: FirebaseFirestore.instance.collection("events").where("venueId", isEqualTo: widget.venueId).snapshots()

但是，当我在一瞬间添加 order by 时，它会刷新并消失。

stream: FirebaseFirestore.instance.collection("events").where("venueId", isEqualTo: widget.venueId).orderBy("date").snapshots()

这就是我所说的地方。

class VenueGridWidgetVerticalState extends State<VenueGridWidgetVertical> {
  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: FirebaseFirestore.instance.collection("events").where("venueId", isEqualTo: widget.venueId).orderBy("date").snapshots(),
      builder: (BuildContext context, AsyncSnapshot snapshot) {
        if (!snapshot.hasData) {
          return const Center(child: Text('Loading events...'));
        }
        return GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            mainAxisExtent: MediaQuery.of(context).size.height / 8,
          ),
          itemBuilder: (BuildContext context, int index) {

我是否要等到它被命令在屏幕上显示结果，因为现在它似乎显示然后排序然后消失？

Answer 1

在订购数据之前显示加载指示器

StreamBuilder(
stream: FirebaseFirestore.instance.collection("events").where("venueId", isEqualTo: widget.venueId).orderBy("date").snapshots(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (!snapshot.hasData) {
      return const Center(child: Text('Loading events...'));
    } else if (snapshot.data.docs.isEmpty) {
      // Data fetched but not ordered yet
      return const Center(child: CircularProgressIndicator());
    }
    return GridView.builder(
      // ... rest of your GridView code
    );
  },
),

此代码检查两个条件：

1. !snapshot.hasData：这表示数据尚未获取。
2. snapshot.data.docs.isEmpty：这意味着数据已获取但仍然 空，可能是因为订购尚未完成。如果任一条件 为 true 时，它会显示一个加载指示器。一旦获取数据并且 有内容（snapshot.data.docs 不为空），它构建 网格视图。

这是一个更简单的解决方案，避免了用于排序标志的额外流和逻辑。