我收集了一些学习用的材料，其中蕴含了很多学习，面试，中高进阶fluuter材料，还有很多视频详解，如果有同学想进一步理解，详情请看文末。也欢送各路大神门前来装X。
1 引言
GridView是罕用可滚动组件之一，在Flutter中通常应用GridView构建二维网格列表，GridView创立办法有五种，形容如下
GridView的构造函数办法，一次性构建所有的子条目，实用于大量数据
GridView.builder形式来构建，懒加载模式，实用于大量数据的状况
GridView.count形式来构建，实用于固定列的状况，实用于大量数
GridView.extent形式来构建，实用于条目有最大宽度的限度的状况，实用于大量数据的状况下
GridView.custom 形式来构建，可配置子条目标排列规定也可配置子条目标渲染加载模式
2 滑动组件的私有属性
GridView也是滑动组件系列中的一个，它也有滑动组件一些专用的属性，简略形容如下：
///滑动方向 Axis scrollDirection = Axis.vertical, ///是否滑动到底部 bool reverse = false, ///滑动控制器 ScrollController controller, ///是否应用默认的控制器 bool primary, ///滑动到边界时的回弹成果 ScrollPhysics physics, ///内边距 EdgeInsetsGeometry padding,
3 通过GridView的构造函数来创立
通过GridView的构造函数来构建，通过参数children来构建GridView中应用到的所有的子条目，通过参数gridDelegate配置SliverGridDelegate来配置子条目标排列规定。
SliverGridDelegate申明为abstract形象的，所以须要应用它的子类来构建。
SliverGridDelegate有两个间接的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。
通过SliverGridDelegateWithFixedCrossAxisCount来构建一个横轴为固定数量的子条目标GridView，如下图所示。
对应代码如下：
///GridView的根本应用class GridViewBaseUsePage extends StatefulWidget { @override State createState() { return ScrollHomePageState(); }}
class ScrollHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: new AppBar( title: Text("GridView根本应用"), ), ///构建九宫格数据数据 body: buildGridView1(),// body: buildGridView2(), ); } ///GridView 的根本应用 ///通过构造函数来创立 Widget buildGridView1() { return GridView( ///子Item排列规定 gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( //横轴元素个数 crossAxisCount: 3, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4), ///GridView中应用的子Widegt children: buildListViewItemList(), ); } ///GridView 的根本应用 ///通过custom形式来创立 Widget buildGridView() { return GridView.custom( cacheExtent: 200, ///子Item排列规定 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///子条目标构建模式 childrenDelegate: ///懒加载的模式 SliverChildBuilderDelegate((BuildContext context, int index) { return buildListViewItemWidget(index); })); }
List buildListViewItemList(){ List list = []; ///模仿的8条数据 for (int i = 0; i
///创立GridView应用的子布局 Widget buildListViewItemWidget(int index) { return new Container( ///内容剧中 alignment: Alignment.center,
///依据角标来动静计算生成不同的背景色彩 color: Colors.cyan[100 * (index % 9)], child: new Text('grid item $index'), ); }}
属性配置阐明如下图所示：
通过SliverGridDelegateWithMaxCrossAxisExtent来构建横轴Item数量不固定的GridView，其程度方向Item个数由maxCrossAxisExtent和屏幕的宽度以及padding和mainAxisSpacing来独特决定。
如下图所示，屏幕分辨率为750*1334的4.7英寸的手机，屏幕宽度逻辑橡素为375.0，屏幕比例devicePixelRatio为2.0。
通过SliverGridDelegateWithMaxCrossAxisExtent配置的子条目设置maxCrossAxisExtent最大宽度为120，时，如下图所示，GridView每一行显示3列。
当本配置maxCrossAxisExtent最大宽度为80，如下图所示，GridView第一行显示4列。
当然当指定一个maxCrossAxisExten值后，在不同手机屏幕分辨率上，每一行展现的列数也有所不同。
4 GridView.count与GridView.extent形式来创立
GridView的count用来构建每行有固定列数的宫格布局，参数crossAxisCount为必选参数，用来配置列数，与应用GridView通过SliverGridDelegateWithFixedCrossAxisCount形式来构建成果一至，根本应用代码如下：
///GridView 的根本应用///通过count形式来创立Widget buildGridView3() { return GridView.count( ///每行的列数 crossAxisCount: 4, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}
GridView的extent用来构建列数不固定，限度每列的最大宽度或者高度的的宫格布局，参数maxCrossAxisExtent为必选参数，用来配置每列容许的最大宽度或者是高度，与应用GridView通过SliverGridDelegateWithMaxCrossAxisExtent形式来构建成果一至，根本应用代码如下：
///GridView 的根本应用///通过count形式来创立Widget buildGridView4() { return GridView.extent( ///每列Item的最大宽度 maxCrossAxisExtent: 120, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, ///所有的子条目 children: buildListViewItemList(), );}
5 GridView.builder形式来创立
在下面形容到的GridView构造函数、count办法与extent形式来构建，都是一次性将所有的子Item构建进去，所以只实用于大量的数据
GridView的builder形式来构建，是通过懒加载模式来的，参数gridDelegate用来配置子Item的排列规定，与GridView的构造函数中gridDelegate应用统一，可别离应用SliverGridDelegateWithFixedCrossAxisCount构建固定列数的宫格和SliverGridDelegateWithMaxCrossAxisExtent构建不固定列数，固定条目最大宽度或者高度的宫格，根本应用代码如下：
///通过builder形式来创立Widget buildGridView5() { return GridView.builder( ///缓存区域 cacheExtent: 120, ///内边距 padding: EdgeInsets.all(8), ///条目个数 itemCount: 100, ///子Item排列规定 gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( ///子Item的最大宽度 maxCrossAxisExtent: 100, //纵轴间距 mainAxisSpacing: 10.0, //横轴间距 crossAxisSpacing: 10.0, //子组件宽高长度比例 childAspectRatio: 1.4, ), ///懒加载构建子条目 itemBuilder: (BuildContext context,int index){ return buildListViewItemWidget(index); }, );}
https://shimo.im/docs/dYkqrQcyr98jPKYX/ 《android学习面试fulutter进阶材料收费获取》，可复制链接后用石墨文档 App 或小程序关上。