在内容列表页面使用 CustomScrollView

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

打开 post_index,发现这个页面显示的就是这个小部件,现在这个小部件用了一个 TabBarView,标签栏视图,下面我们不打算再用标签了。这里可以用一个 CustomScrollView,自定义的滚动视图,在 Flutter 应用里跟滚动相关的东西都是 sliver。

给它添加一个 slivers 属性,它的值是一组 sliver 小组件,里面可以先添加一个 PostList 小部件。在上面把不需要的导入删除掉。

然后可以把 components 里的 post_index_latest 还有 post_index_popular 这两个小部件删除掉。

post_list.dart

打开 post_list.dart ,先把这个 notContent 删除掉。在这个 post_list 小部件里面会根据用户选择的内容列表布局切换显示两种不同排版的内容列表。这两种排版的内容可以单独定义成小部件。

PostListStack

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

小部件需要是一个 Sliver 小部件,这里我们先用一个 SliverPadding 小部件,添加点边距,padding 属性的值是 EdgeInsets.all,大小是 8 。再添加一个 sliver ,值可以用一个 SliverList ,添加一个 delegate 参数,值是一个 SliverChildBuilderDelegate,它的第一个参数是一个 builder,用它可以构建出每个列表项目。

一个 context 参数,一个 index 参数,return 的东西就是列表项目小部件,这里用一下 PostListItem 小部件,Item 的值是 posts[index] 。

然后还得再添加一个 childCount ,说明一下这个列表里的项目总共的数量,值是 posts.length 。

定义好这个小部件以后,回到 post_list.dart,找到 stackList ,现在这里用的是一个 ListView,把它的值换成 PostStackList 小部件,提供一个 posts 参数,值设置成 posts 。 提示这个 posts 的类型有点问题,在上面声明这个 posts 的时候,设置一下它的类型,List

然后把这个小部件 return 的东西设置成 postList 。打开编辑器的调试,重新启动一下。

观察

在模拟器上观察一下这个 stack 类型的内容列表,现在这个内容列表页面用的是一个 CustomScrollView,它里面显示的 stack 类型的内容列表,是用 SliverList 构建出来的。

在内容列表页面使用 CustomScrollView《 Flutter 移动端实例:内容列表 》

统计

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

社会化网络

关于

微信订阅号

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