动态更改 gridview 横轴计数以填充颤动中的动态列

Question

我正在开发来自 Flutter 框架的 gridview 以实现动态列数，但没有得到解决方案。 我尝试将 GridView.count 和 Gridview.builder 与 itembuilder 一起使用，但没有得到预期的结果。

任何帮助将不胜感激。

请找到要实现的设计图。

编辑：使用 staggeredGridview 后，我得到以下结果

return StaggeredGridView.countBuilder(
      crossAxisCount: 2,
  itemBuilder: (BuildContext context, int index) {
    if (index % 2 == 0) {
      return Container(
        child: setupTile('no'),
      );
    } else {
      return Container(
        child: setupTiles('title','title2'),
      );
    }
  },
  staggeredTileBuilder: (int index) =>
      index % 2 == 0 ? new StaggeredTile.fit(2) : new StaggeredTile.fit(1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
  padding: const EdgeInsets.all(4.0),
  itemCount: 30,
  primary: false,
  shrinkWrap: true,
);

最终编辑/解决方案。

I have confused about the staggeredGridView later and lot many hit and trails finally figured it out.
 This might be helpful for others, following below steps.
1) understand how the StaggeredGrid works with crossAxisCount and StaggeredTile.count
2)if we define crossAxisCount =2 the StaggeredTile.count must be (2,1) for this instance Tile.count(2(will occupy the complete screen width) and 1 will strech the height of the tile.
3) for the same example if we define crossAxisCount=4 the StaggeredTile.count(4,1) here if we specify four it will occupy full width with single tile and if we specify 2 it will occupy half of the screen and will give space to second tile whose StaggeredTile will be (2,1).

还请检查以下代码，后跟图像。

 return new StaggeredGridView.countBuilder(
  crossAxisCount: 2, //as per your requirement
  itemCount:8 , //as per your requirement
  itemBuilder: (BuildContext context, int index) {
    if (index % 2 == 0) { //for even row
      return setupTile(shoplist[index].title); //your required widget
    } else { //for odd row
      return setupTiles(shoplist[index].title,shoplist[index].title); //you//your required widget
    }
  },
  staggeredTileBuilder: (int index){
    if(shoplist[index].catID==1){
      return new StaggeredTile.count(2,1);
    }else{
      return new StaggeredTile.count(1,1);
    }
  }
);

这里catID用来指定类别。这是您的选择。

Answer 1

您应该使用交错网格视图。通过使用它，您可以实现您想要的。 只需参考下面的飞镖插件 flutter_staggered_grid_view

new StaggeredGridView.countBuilder(
    crossAxisCount: , //as per your requirement
    itemCount: , //as per your requirement
    itemBuilder: (BuildContext context, int index) {
      if (index % 2 == 0) { //for even row
        return; //your required widget 
      } else { //for odd row
        return; //your required widget 
      }
    },
    staggeredTileBuilder: (int index) => index % 2 == 0
        ? new StaggeredTile.fit(2)
        : new StaggeredTile.fit(1),
  )