动态更改 gridview 横轴计数以填充颤动中的动态列 [英] Dynamically change the gridview crossaxis count to populate dynamic columns in flutter

问题描述

我正在使用颤振框架的网格视图来实现动态列数，但没有得到解决方案.我尝试将 GridView.count 和 Gridview.builder 与 itembuilder 一起使用，但没有得到预期的结果.

I'm working on a gridview from flutter framework to achieve a dynamic column count, but didn't get a solution. I have tried using GridView.count and Gridview.builder with itembuilder and i didn't get the expected result.

任何帮助将不胜感激.

请找到要实现的设计图片.

Please find the image of the design to be achieved.

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

edit : after using staggeredGridview i'm getting the below result

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).

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

ALso check with the below code followed by image.

 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用来指定类别.这是您的选择.

Here catID is used to specify the category. it is anything of your choice.

推荐答案

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

You should use staggered grid view. By using that you can achive what you want. Just refer below dart plugin 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),
  )

这篇关于动态更改 gridview 横轴计数以填充颤动中的动态列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！