用 GridView.count 或者 GridView.extent 生成的网格视图，它们里面的视图项目的数量是固定 .. 如果想要按需生成视图项目，可以用一下 GridView.builder 来创建这个网格视图 ..

在 ViewDemo 里面，用一下 GridViewBuilderDemo .. 下面再去创建这个小部件 .. 添加一个类 .. 名字是 GridViewBuilderDemo .. 继承一下 StatelessWidget ... 类里面添加一个 build 方法 ..

方法 return 的东西可以用一下 GridView.builder ...

首先我们得告诉它项目的数量 .. 添加一个 itemCount .. 用一下 posts.length .. 这个 posts 是文件顶部导入进来的 model 下面的 post.dart 这个文件里面提供的一组列表数据 ..

再添加一个 itemBuidler .. 设置一下构建视图项目用的方法 .. 把它设置成 _gridItemBuilder .. 一会要去创建这个方法 ..

这个 builder 还需要一个 gridDelegate .. 它可以控制视图项目的显示 .. 用一个 SliverGridDelegateWithFixedCrossAxisCount .. 它基本上就相当于是一个 GridView.count ..

添加一个 crossAxisCount 设置一下交叉轴的项目的数量 .. 暂时把它设置成 3 .. 再添加一个 crossAxisSpacing .. 大小是 8.0 .. 然后再添加一个 mainAxisSpacing .. 大小也可以是 8.0 ..

下面再去定义这个 _gridItemBuilder 方法 .. 方法返回的是 Widget .. 名字叫 _gridItemBuilder .. 方法接收一个 BuildContext 类型的 context 参数 .. 还有一个整数类型的 index ..

方法里面 return 一个 Container ... 添加 child 属性设置一下它包装的东西 .. 用一个 Image.network .. 来自网络的图像 ... 地址是 posts[index].imageUrl ..

现在界面上会显示一组图像 .. 我们可以再设置一下图像的填充模式 .. 添加一个 fit .. 值可以是 BoxFit.cover ...

交叉轴上的项目数量，是 crossAxisCount 这个属性控制的 .. 修改一下它的值 ...

crossAxisSpacing ... 还有 mainAxisSpacing 可以控制项目之间的间隔 ..

这个 gridDelegrate 还可以是 SliverGridDelegrateWithMaxCrossAxisExtent .. 这样我们就不能再用 crossAxisCount 这个属性了 .. 要换成一个 maxCrossAxisExtent .. 调整这个属性的值 .. 观察一下它对这个网格视图的影响 ..

网格视图的周围可以再添加一个内边距 .. 先用一个 padding 属性 ... 它可以用一下EdgeInsets.all 在四周添加一个 8.0 的内边距 ..