内容列表还有一种网络布局的界面，下面我们重构一下这个界面。
在项目下面新建一个文件，放在 lib/post/index/components，名字是 post_grid_list.dart，文件里定义一个小部件，名字是 PostListGrid，小部件里添加一个属性，类型是 List
因为小部件要放在 CustomScrollView 里面使用，所以小部件必须是一个 sliver 类型的小部件。先用一个 SliverPadding 添加点边距，padding 的值是 EdgeInsets.all ，大小是 8 。
再设置一下 sliver 参数，它的值是一个网格布局的列表，可以先给项目安装一个包，在终端，项目所在目录的下面，执行 flutter pub add flutter_staggered_grid_view ，等会儿可以使用这个包提供的功能，创建一个网格布局的内容列表。
回到项目，这里可以用一下 SliverStaggeredGrid.countBuilder，这个东西来自刚才我们安装的那个包。
设置一下交叉轴数量，crossAxisCount 设置成 2 ，然后在交叉轴还有主轴上添加点边距，crossAxisSpacing 设置成8 ，mainAxisSpacing 也是 8 。然后用 itemCount 说明一下列表项目数量，这里就是 posts.length。
再添加一个 itemBuilder 构建每个项目，一个 context 还有一种 index 参数， return 的东西是一个 PostListItem 小部件，item 设置成 posts[index]，layout 设置成 PostListLayout.grid 。
下面还得再添加一个 staggeredTileBuilder，用这个构建器，说明一下每个项目的在交叉轴还有主轴的大小。
构建器接收一个 index 参数，表示的是项目的序号，在这个构建器里声明一个 Post 名字是 post ，值是 posts[index] ，这样这个 post 的值就是当前这个列表项目使用的内容数据。
下面声明一个 int 类型的东西，名字是 crossAxisCount ，默认让它等于 1 ，再声明一个 double 类型的东西，名字是 mainAxisCount，默认值也是 1 。
然后声明一个 bool 类型的数据，名字是 isPortrait ，默认值是 false，它表示的是当前这个内容项目图像是否是竖版的。
然后判断一下 post.file!.width != null 并且 post.file!.height 也不等于 null ，设置一下 isPortrait 的值，如果 post.file!.width! 小于 post.file!height! ，我们就认为这个内容里带的图像就是竖版的。
继续判断一下，如果 isPortrait ，就可以重新设置一下 mainAxisCount ，让它等于 1.5 。最后 return 的东西用一下 StaggeredTile.count，两个参数，第一个参数是 crossAxisCount，第二个参数是 mainAxisCount。
这样一般的内容项目都会是正方形，如果内容项目的图像是竖版的，它在主轴上会占用更多的空间。
post_list.dart
打开 post_list.dart，这里判断了一下内容列表布局，如果是 PostListLayout.grid，就让这个 postList 等于一个 gridList。
找到上面定义的这个 gridList，修改一下它的值，现在可以用一个 PostGridList ，把 posts 参数的值设置成 posts。
shift + command + F5 重新启动一下，然后打开下拉菜单，选择网格布局 。 现在控制台上会报个错，暂时先不用管它，再重新启动一下应用。
现在你看到的就是我们新做的这个网格布局。
