如何：创建不是 GridView 但在 CustomScrollView 内滚动的动态图像网格？ （颤振网）

Question

我想创建一个画廊页面。

我需要它来动态抓取图像，例如某些小部件提供的 builder 方法...

我也希望它根据 device/screen 的大小包装和缩放这些图像。

我目前有一个 CustomScrollView 作为我页面的主体 - 我一直用它来放置我的 header/navigation 栏、页脚等

我很确定我可以在此 CustomScrollView 中使用 SliverGrid，但我不知道该怎么做。

这是一个布局示例，显示了我希望网格的位置：

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: primaryBlack,
      drawer: NavDrawer(),
      body: Scrollbar(
        child: CustomScrollView(
          slivers: <Widget>[
            SliverNavBar(
              backgroundImage: Image.asset(
                'assets/images/cabarats_gallery.jpg',
                fit: BoxFit.cover,
              ),
              expandedHeight: 200,
            ),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  ColorBoxRow(
                    color1: primaryLightBrown,
                    color2: primaryBlack,
                    color3: primaryRed,
                    color4: primaryBrown,
                  ),
                  Column(
                    children: <Widget>[
                      SizedBox(height: 50),
                      Text(
                        "PHOTOS DE RATS",
                        style: TextStyle(
                          color: primaryTextColor,
                          fontSize: 25,
                          fontFamily: 'LemonMilk',
                        ),
                      ),
                      SizedBox(height: 50),
                    ],
                  ),

                  // DYNAMIC GRID HERE



                  // DYNAMIC GRID HERE

                  FollowBar(
                    color: primaryBrown,
                  ),
                  Footer(
                    color: primaryRed,
                  )
                ],
              ),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

感谢@pskink 和其他一些人，这就是我创建画廊网格的方式。

// This creates a Stream and a List of widgets (I think) to later use in a streambuilder

Stream<List<GalleryImage>> fetchDataFromFireBase() {
  final Query reference = Firestore.instance.collection('gallery');
  return reference.snapshots().map(convert);
}

List<GalleryImage> convert(QuerySnapshot doc) {
  return doc.documents.map((f) {
    return GalleryImage(
      imageUrl: f.data['imageUrl'],
    );
  }).toList();
}

// Here is the Gallery page with StreamBuilder at the top

class GalleryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: fetchDataFromFireBase(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final data = snapshot.data;
            return Scrollbar(
              child: CustomScrollView(
                slivers: <Widget>[
                  SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisSpacing: 10,
                        mainAxisSpacing: 10,
                        crossAxisCount:
                            ResponsiveLayout.isLargeScreen(context) ? 5 : 3),
                    delegate: SliverChildBuilderDelegate(
                        (ctx, i) => GalleryImage(
                              imageUrl: data[i].imageUrl,
                            ),
                        childCount: data.length),
                  ),

                ],
              ),
            );
          }
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

// The GalleryImage widget used buy the Grid

class GalleryImage extends StatelessWidget {
  final String imageUrl;
  const GalleryImage({
    Key key,
    this.imageUrl,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Image.network(
        imageUrl,
        fit: BoxFit.cover,
      ),
    ).showCursorOnHover;
  }
}