第 1 行 2 个图像和第 2 行 3 个图像使用 flutter

Question

如何在 flutter 中制作一个有 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),
        ),
      ),
    );
  }

Answer 1

你在找这个吗？

body: Container(
        height: 1500,
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: StaggeredGridView.count(
          crossAxisCount: 6,
          mainAxisSpacing: 3.0,
          crossAxisSpacing: 3.0,
          staggeredTiles: [
            StaggeredTile.count(3, 2),
            StaggeredTile.count(3, 2),
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 2),
            StaggeredTile.count(2, 2),
            // 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"),
          ],
        ),
      ),

第 1 行 2 个图像和第 2 行 3 个图像使用 flutter

2 images in 1st row and 3 images in 2nd row using flutter

dart

staggered-gridview

flutter