如何:创建不是GridView但在CustomScrollView中滚动的动态图像网格？(Flutter-Web)

Question

我想创建一个画廊页面。

我需要它来动态捕获图像，就像一些小部件提供的builder方法一样……

我也想要它包装，并根据设备/屏幕的大小缩放这些图像。

我目前有一个CustomScrollView作为我页面的主体--我一直在用它来放置我的页眉/导航栏、页脚等。

我很确定我可以在这个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;
  }
}