Question

有一些方法可以创建从网站获取的图像列表，并将其显示为该网格。例如，我有20幅来自XYZ网站的图像，我想按照网格结构显示所有图像

并且我使用以下代码制作自定义网格：

Widget build(BuildContext context) {
return Scaffold(
  body:Container(
    margin: EdgeInsets.all(10),
    child: Container(
      margin: EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: Colors.white
      ),
      child: StaggeredGridView.count(
        crossAxisCount: 4,
        mainAxisSpacing: 4,
        crossAxisSpacing: 4,
        staggeredTiles: [
          StaggeredTile.count(3, 2),
          StaggeredTile.count(1, 1),
          StaggeredTile.count(1, 1),
          StaggeredTile.count(1, 2),
          StaggeredTile.count(3, 2),
          StaggeredTile.count(3, 2),
          StaggeredTile.count(1, 2),
        ],
        children: <Widget>[
          Container(color: Colors.deepPurple,),
          Container(color: Colors.red,),
          Container(color: Colors.orangeAccent,),
          Container(color: Colors.blueAccent,),
          Container(color: Colors.yellow,),
          Container(color: Colors.grey,),
          Container(color: Colors.greenAccent,),
        ],
      )
    )
  )
);

我尝试通过列出图像URL并使用以下代码进行尝试，但我不知道如何尊重之前显示的网格。

StaggeredGridView.countBuilder(
        crossAxisCount: 2,
        mainAxisSpacing: 20,
        crossAxisSpacing: 20,
        itemCount: imageList.length,
        itemBuilder: (context,index){
      return Container(
        decoration: BoxDecoration(
          color: Colors.transparent,
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          child: FadeInImage.memoryNetwork(placeholder: kTransparentImage,image: imageList[index], fit: BoxFit.cover,),
        ),
      );
    }, staggeredTileBuilder: (index){
      return StaggeredTile.count(1, index.isEven? 1.2 : 1.8);
    }),

Answer 1

我将estructure更新为10个容器，而不是7个，并创建一个函数，该函数通过使用MOD 10返回我需要的StaggeredTitle，下面是代码：

StaggeredTile configuracion(int index) {
index = index + 1;
switch (index % 10) {
  case 1:
    {
      return StaggeredTile.count(3, 2);
    }
  case 2:
    {
      return StaggeredTile.count(1, 1);
    }
  case 3:
    {
      return StaggeredTile.count(1, 1);
    }
  case 4:
    {
      return StaggeredTile.count(1, 2);
    }
  case 5:
    {
      return StaggeredTile.count(3, 2);
    }
  case 6:
    {
      return StaggeredTile.count(3, 2);
    }
  case 7:
    {
      return StaggeredTile.count(1, 2);
    }
  case 8:
    {
      return StaggeredTile.count(1, 1);
    }
  case 9:
    {
      return StaggeredTile.count(3, 2);
    }
  case 10:
    {
      return StaggeredTile.count(1, 1);
    }
  default:
    {
      return StaggeredTile.count(1, 1);
    }
}

}

如何在Flutter中创建此自定义交错网格？

1 个答案: