【发布时间】：2023-03-18 16:05:02
【问题描述】：
如何在颤振中制作一个有 2 行的staggeredGridView。在第一行将有两个图像，在第二行将有三个图像，在第二行的最后一个图像中会有一些文本，如 20+ 或 40+。
请看下图更好地理解
body: Padding(
child: Container
(
height: 1500,
decoration: BoxDecoration(
color: Colors.white,
),
child: StaggeredGridView.count(
crossAxisCount: 4,
mainAxisSpacing: 3.0,
crossAxisSpacing: 3.0,
staggeredTiles: [
StaggeredTile.count(2, 1),
StaggeredTile.count(2, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, 1),
StaggeredTile.count(1, 1),
],
children: <Widget>[
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
myPhotoList(
"https://www.google.com/search?q=bird&rlz=1C1CHBD_enBD884BD884&sxsrf=ALeKk032QyXLy5s0te6Y52Sp3yyA2g4sfQ:1598990850500&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjslZKN4cjrAhUWWX0KHe3sAdMQ_AUoAXoECB0QAw&biw=1536&bih=792#imgrc=1ois95B-LwbEBM"),
Details(),
],
),
),
),
Widget myPhotoList(String img) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.fill,
image: NetworkImage(
img),
),
),
);
}
【问题讨论】：
-
如果您添加一些您尝试过的代码来鼓励社区回答，那就太棒了，无论如何我会尝试为您做点什么
-
谢谢。我添加了一些代码。这样，我设法在第一行添加了 2 个图像，在第二行添加了 4 个图像。但未能在第二行添加 3 张图片而不是 4 张图片
-
“Flutter 交错网格视图，支持多列和不同大小的行。”是这个插件在 pub.dev 上的定义。然而，您想要一些非常静态和预定义的东西（第一行 = 2 列，第二行 = 3 列）。因此，恕我直言，对您而言，最好的解决方案不是让
staggeredGridView符合您的特定需求，而是更改您正在使用的 工具，您可以获得您正在寻找的东西2 个非常基本的小部件：Column和Row。
标签： flutter dart staggered-gridview