Flutter开发性能提升之：如何避免Widget重复Build

GridView可以构建一个二维网格列表

默认构造函数如下：

我们可以看到，GridView和ListView的大多数参数都是相同的，它们的含义也都相同的。我们唯一需要关注的是gridDelegate参数，类型是SliverGridDelegate，它的作用是控制GridView子组件如何排列(layout)。

SliverGridDelegate 是一个抽象类，定义了GridView Layout相关接口，子类需要通过实现它们来实现具体的布局算法。Flutter中提供了两个 SliverGridDelegate 的子类 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithFixedCrossAxisCount

该子类实现了一个横轴为固定数量子元素的layout算法，其构造函数为：

可以发现，子元素的大小是通过crossAxisCount和childAspectRatio两个参数共同决定的。注意，这里的子元素指的是子组件的最大显示空间，注意确保子组件的实际大小不要超出子元素的空间。

示例

SliverGridDelegateWithMaxCrossAxisExtent

该子类实现了一个横轴子元素为固定最大长度的layout算法，其构造函数为

maxCrossAxisExtent为子元素在横轴上的最大长度，之所以是“最大”长度，是因为横轴方向每个子元素的长度仍然是等分的，举个例子，如果ViewPort的横轴长度是450，那么当maxCrossAxisExtent的值在区间[450/4，450/3)内的话，子元素最终实际长度都为1125，而childAspectRatio所指的子元素横轴和主轴的长度比为最终的长度比。其它参数和SliverGridDelegateWithFixedCrossAxisCount相同。

示例

GridViewcount构造函数内部使用了SliverGridDelegateWithFixedCrossAxisCount，我们通过它可以快速的创建横轴固定数量子元素的GridView

示例

GridViewextent构造函数内部使用了SliverGridDelegateWithMaxCrossAxisExtent，我们通过它可以快速的创建横轴子元素为固定最大长度的的GridView

示例

上面我们介绍的GridView都需要一个widget数组作为其子元素，这些方式都会提前将所有子widget都构建好，所以只适用于子widget数量比较少时，当子widget比较多时，我们可以通过GridViewbuilder来动态创建子widget。GridViewbuilder 必须指定的参数有两个：

示例

假设我们需要从一个异步数据源（如网络）分批获取一些Icon，然后用GridView来展示:

_retrieveIcons()：在此方法中我们通过Futuredelayed来模拟从异步数据源获取数据，每次获取数据需要200毫秒，获取成功后将新数据添加到_icons，然后调用setState重新构建。

在 itemBuilder 中，如果显示到最后一个时，判断是否需要继续获取数据，然后返回一个Icon。

GridViewbuilder 源码定义如下：

它主要要传两个参数 gridDelegate 和 childrenDelegate ，gridDelegate是SliverGridDelegate类型，SliverGridDelegate它有两个子类，就是我们上文中说的 SliverGridDelegateWithFixedCrossAxisCount 和 SliverGridDelegateWithMaxCrossAxisExtent ，childrenDelegate 是SliverChildDelegate类型，SliverChildDelegate也有两个子类 SliverChildBuilderDelegate 和 SliverChildListDelegate ,一个是通过Builder创建Item，一个是指定所有item。和ListView 很类似

示例

补充知识点：

GridView中的Sliver是SliverGrid

ListView 和 GridView 都是继承于BoxScrollView，BoxScrollView中存在一个抽象方法buildChildLayout，这个buildChildLayout方法是在提供Sliver，GridView中关于buildChildLayout实现如下：

provider 是flutter 中的状态管理 开源库;

存储的数据对象 必须extends ChangeNotifier；下层widget 通过 Providerof(context) 函数 获取model对象 ,并且可以建立依赖关系；当数据对象发生变化时，依赖的widget 会重新build，像不像InheritedWidget Provider 没错 下层widget就是 封装了InheritedWidget

主要 通过 Providerof<T>(context) 函数，来获取；

推荐使用 Providerof而不是 Consumer,因为 listen默认为true,也就是说 默认 依赖于 持有数据model的widget 对应的element;

数据类 可继承的 ChangeNotifier,本身和privider框架 没有关系；

ChangeNotifier 是 flutter框架 提供的工具类， 用来实现一对多的订阅通知功能。

以上就是关于Flutter开发性能提升之：如何避免Widget重复Build全部的内容，包括:Flutter开发性能提升之：如何避免Widget重复Build、Flutter GetX基础教程（十二）：RxList、Rx([])、.obs对比分析、Flutter 可滚动组件 之 GridView (十七)等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！