框架集合：/Solido/awesome-flutter
1.插件：flutter_staggered_grid_view: ^0.3.0
建议使用0.3.0以上的版本，因为低版本会出现滑动不了或者报错的情况
2.上代码
import 'package:flutter/material.dart';import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';class StaggeredGridPage extends StatefulWidget {@override_StaggeredGridPageState createState() => _StaggeredGridPageState();}class _StaggeredGridPageState extends State<StaggeredGridPage> {ScrollController _scrollController = ScrollController();//StaggeredGridView.countBuilder布局Widget _countBuildItem() {return StaggeredGridView.countBuilder(itemCount: 8,//元素数量crossAxisCount: 4,// 横轴元素数量StaggeredTile.count(1, index.isEven ? 3 : 1);横轴为1时itemBuilder: (context, index) => new Container(color: Colors.green,child: new Center(child: new CircleAvatar(backgroundColor: Colors.white,child: new Text('$index'),),)),staggeredTileBuilder: (index) {return StaggeredTile.count(2, index.isEven ? 2 : 1); //横轴和纵轴的数量,控制瀑布流效果},mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,);}///Widget _countItem() {return StaggeredGridView.count(crossAxisCount: 2,//physics: NeverScrollableScrollPhysics(),//不可以滑动//shrinkWrap: true,//外层有SingleChildScrollView或者CustomScrollView等可以滑动组件时使用mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,staggeredTiles: const <StaggeredTile>[const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),],children: [1, 2, 3, 4, 5, 6].map((item) => Container(child: Container(color: Colors.green,child: new Center(child: new CircleAvatar(backgroundColor: Colors.white,child: new Text('$item'),),)),)).toList(),);}Widget _extentItem() {return StaggeredGridView.extent(//physics: NeverScrollableScrollPhysics(),//不可以滑动//shrinkWrap: true,//外层有SingleChildScrollView或者CustomScrollView等可以滑动组件时使用maxCrossAxisExtent: 100,//设置固定大小mainAxisSpacing: 4.0,crossAxisSpacing: 4.0,staggeredTiles: const <StaggeredTile>[const StaggeredTile.count(1, 1), //参数为x,y的比例const StaggeredTile.count(2, 1),const StaggeredTile.count(1, 2),const StaggeredTile.count(2, 1),const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),const StaggeredTile.count(2, 2),const StaggeredTile.count(2, 1),],children: [1, 2, 3, 4, 5, 6].map((item) => Container(child: Container(color: Colors.green,child: new Center(child: new CircleAvatar(backgroundColor: Colors.white,child: new Text('$item'),),)),)).toList(),);}Widget _extentBuildItem() {return StaggeredGridView.extentBuilder(maxCrossAxisExtent: 200,itemCount: 8,mainAxisSpacing: 4,crossAxisSpacing: 4,itemBuilder: (context, index) {return Container(color: Colors.green,child: new Center(child: new CircleAvatar(backgroundColor: Colors.white,child: new Text('$index'),),));},staggeredTileBuilder: (index) {return StaggeredTile.count(1, index.isEven ? 2 : 1);});}_bodyView(int type) {Widget tempWidget;switch (type) {case 1:tempWidget = _countBuildItem();break;case 2:tempWidget = _countItem();break;case 3:tempWidget = _extentItem();break;case 4:tempWidget = _extentBuildItem();break;case 5:_countBuildItem();break;case 6:_countBuildItem();break;}return tempWidget;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text("瀑布流布局"),),body: _bodyView(4),);}}
3.创建StaggeredGridView布局有六种不同的方法，常见的是以上四种布局
如果觉得《StaggeredGridView瀑布流 网格布局》对你有帮助，请点赞、收藏，并留下你的观点哦！
