用户登录

内容列表还有一种网络布局的界面,下面我们重构一下这个界面。

在项目下面新建一个文件,放在 lib/post/index/components,名字是 post_grid_list.dart,文件里定义一个小部件,名字是 PostListGrid,小部件里添加一个属性,类型是 List 名字是 posts ,设置一下构造方法,里面添加一个带名字的参数,required this.posts。

因为小部件要放在 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 重新启动一下,然后打开下拉菜单,选择网格布局 。 现在控制台上会报个错,暂时先不用管它,再重新启动一下应用。

现在你看到的就是我们新做的这个网格布局。

重构网格布局内容列表(flutter_staggered_grid_view)《 Flutter 移动端实例:内容列表 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点