Dynamically change the gridview crossaxis count to populate dynamic columns in flutter

问题

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.

Any help would be appreciated.

Please find the image of the design to be achieved.

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,
);

Final Edit / Solution figuredout.

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);
    }
  }
);

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

回答1:

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

来源：https://stackoverflow.com/questions/57833400/dynamically-change-the-gridview-crossaxis-count-to-populate-dynamic-columns-in-f

标签

Flutter

flutter-layout