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

Question

我正在使用颤振框架的 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

您应该使用交错网格视图。通过使用它，您可以实现您想要的。只需参考下面的 dart 插件 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),
  )