共计 4507 个字符，预计需要花费 12 分钟才能阅读完成。
我收集了一些学习用的材料，其中蕴含了很多学习，面试，中高进阶 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 或小程序关上。