RenderViewport 期望有一个 RenderSliv​​er 类型的子级，但收到了一个 RenderErrorBox 类型的子级

Question

我使用 SliverStaggeredGrid.countBuilder 显示从 Firestore 获得的数据，没有任何问题。我想用 listview.builder 显示我的数据。

我的正常代码是这样的，我想改变它以便能够过滤。

body: CustomScrollView(
         slivers: [
           StreamBuilder<QuerySnapshot>(
             stream: FirebaseFirestore.instance
                 .collection(widget.title)
                 .orderBy("id", descending: true)
                 .snapshots(),
             builder: (context, dataSnapshot) {
               return !dataSnapshot.hasData
                   ? SliverPadding(
                       sliver: SliverToBoxAdapter(
                         child: ColorLoader(
                           dotOneColor: Colors.white,
                           dotTwoColor: Colors.white,
                           dotThreeColor: Colors.white,
                         ),
                       ),
                       padding: EdgeInsets.all(0),
                     )
                   : SliverPadding(
                       sliver: SliverStaggeredGrid.countBuilder(
                           crossAxisCount: 1,
                           staggeredTileBuilder: (_) => StaggeredTile.fit(1),
                           itemBuilder: (context, index) {
                             DataModel model = DataModel.fromJson(
                                 dataSnapshot.data!.docs[index].data()
                                     as Map<String, dynamic>);
                             return sourceInfo(model, context);
                           },
                           itemCount: dataSnapshot.data!.docs.length),
                       padding: EdgeInsets.all(0),
                     );
             },
           ),
         ],
       ),

当我在 sliver 中使用带有 listview.builder 的代码时，它不会在屏幕上显示任何数据。

body: CustomScrollView(
          slivers: [
            StreamBuilder<QuerySnapshot>(
              stream: FirebaseFirestore.instance
                  .collection('posts')
                  .orderBy("id", descending: true)
                  .snapshots(),
              builder: (BuildContext context,
                  AsyncSnapshot<QuerySnapshot> dataSnapshot) {
                return !dataSnapshot.hasData
                    ? SliverPadding(
                        sliver: SliverToBoxAdapter(
                          child: ColorLoader(
                            dotOneColor: Colors.white,
                            dotTwoColor: Colors.white,
                            dotThreeColor: Colors.white,
                          ),
                        ),
                        padding: EdgeInsets.all(0),
                      )
                    : ListView.builder(
                        itemCount: dataSnapshot.data!.docs.length,
                        itemBuilder: (context, index) {
                          DataModel model = DataModel.fromJson(
                              dataSnapshot.data!.docs[index].data()
                                  as Map<String, dynamic>);
                          return sourceInfo(model, context);
                        },
                      );
              },
            ),
          ],
        ),

在这种情况下我该怎么办？

Answer 1

Flutter 有两个协议来绘制小部件。Sliver 和 Box 协议。StreamBuilder 最初是一个 StatefulWidget，它使用 Box 协议。这不适用于 CustomScrollView。

您可以使用 SliverToBoxAdapter 包装 StreamBuilder 以保持原样。还要删除 StreamBuilder 内的 SliverPadding 以拥有盒子协议小部件。

body: CustomScrollView(
          slivers: [
            SliverToBoxAdapter(
              child: StreamBuilder<QuerySnapshot>(
                stream: FirebaseFirestore.instance
                    .collection('posts')
                    .orderBy("id", descending: true)
                    .snapshots(),
                builder: (BuildContext context,
                    AsyncSnapshot<QuerySnapshot> dataSnapshot) {
                  return !dataSnapshot.hasData
                      ? Padding(
                          child: ColorLoader(
                            dotOneColor: Colors.white,
                            dotTwoColor: Colors.white,
                            dotThreeColor: Colors.white,
                          ),
                          padding: EdgeInsets.all(0),
                        )
                      : ListView.builder(
                          itemCount: dataSnapshot.data!.docs.length,
                          itemBuilder: (context, index) {
                            DataModel model = DataModel.fromJson(
                                dataSnapshot.data!.docs[index].data()
                                    as Map<String, dynamic>);
                            return sourceInfo(model, context);
                          },
                        );
                },
              ),
            ),
          ],
        ),