如何：创建不是 GridView 但在自定义滚动视图中滚动的图像动态网格？(飘网)

Question

我想创建一个图库页面。

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

我还希望它根据设备/屏幕的大小包装和缩放这些图像。

我目前有一个自定义滚动视图作为我的页面的主体 - 我一直在使用它来放置我的页眉/导航栏、页脚等。

我很确定我可以在这个自定义滚动视图中使用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;
}
}