SliverGrid 跟我们之前用过的 GridView 差不多 .. 其实一个 GridView 就相当于是一个 CustomScrollView 的 slivers 属性里面，加了一个 SliverGrid .. 如果觉得 GridView 不能满足自己的需求 .. 可以用一下 SliverGrid ..

再查看一下这个 SliverGrid 的定义 .. 按住 alt 键 .. 按一下名字 .. 你会发现除了我们可以用 SliverGrid 去创建一个网格视图 .. 还可以用一下 SliverGrid.count ... 还有一个 SliverGrid.extent .. 如果你看过之前的 GridView 相关的视频，你应该可以理解它们是什么意思 ..

如果使用 SliverGrid 去创建网格视图 .. 需要提供两个东西 .. 一个是 gridDelegate .. 用它去构建网格视图相关的东西 .. 还需要一个 delegate ，它是一个 SliverChildDelegate .. 它主要是去构建网格视图里面的项目用的 ..

回到 SliverDemo .. 在 SliverGrid 里面 .. 添加一个 gridDelegate .. 用一下 SliverGridDelegateWithFixedCrossAxisCount .. 它里面可以设置交叉轴上的网格项目的数量 .. 这个数量是 crossAxisCount 设置的 .. 把它设置成 2 .. 再添加一个 crossAxisSpacing .. 大小是 8.0 ... mainAxisSpacing 的值也可以把它设置成 8.0 ..

这个 SliverGrid 里面，还需要一个 delegate 去构建一下网格视图里的项目 .. 用一下 SliverChildBuilderDelegrate .. 我们需要给它提供一个 builder 方法 .. 直接在里面添加一个这样的方法 .. 方法接收一个 BuildContext 类型的 context 参数 .. 还有一个整数类型的 index 参数 ..

方法 return 的东西就是网格里的项目 .. 用一个 Container .. 设置一下它的 child ... 可以显示一个来自网络的图像 .. Image.network .. 图像的地址是 posts .. index .. imageUrl .. 再设置一下填充 .. fit 可以设置成 BoxFit.cover .. 这个 posts 数据我把它放在了 model 这个目录下面的了 .. 在文件顶部 .. 导入上一级目录下面的 model 里面的 post.dart ..

另外我们还得再设置一下网格视图项目的数量 .. 给 SliverChildBuilderDelegate 再添加一个 childCount .. 数量是 posts 的 length 属性的值 ..

现在 .. 界面上显示的就是一个 SliverGrid .. 在这个 SliverGridDelegate 里面还有一个叫 childAspectRatio 的属性，它可以控制网格视图项目的显示比例 .. 默认它的值是 1.0 .. 你可以把它设置成小于 1.0 的一个数字 ... 或者大于 1.0 的一个数字 .. 再观察一下得到的效果 ..