用户登录

滚动到顶部的时候向下继续拉动这个视图可以重新请求内容列表数据,这样如果服务端有新的内容数据,就会把它显示在这里。

打开 app_header.dart,修改一下这里用的这个 SliverAppBar 小部件,在里面先添加一个 stretch ,把它设置成 true,允许拉抻,再用 stretchTriggerOffset 设置一下拉伸触发的距离,默认是 100,这里我们可以把它设置成 60 ,下面再添加一个 onStretchTrigger,拉伸触发器,设置成 onStretchTrigger。

在上面找个地方可以定义一下这个方法,名字是 onStretchTrigger,这个方法要用 async 标记一下,在这个方法里先在控制台上输出一行文字,下拉刷新 。

在模拟器上先测试一下,向下拉伸这个视图,到一定程度的时候,会触发执行 onStretchTrigger ,在控制台上输出了一行文字,下拉刷新。

继续再编辑一下,在这个文件的顶部先导入一个包,导入的是 provider 这个包。

然后在 build 方法里面,声明一个 postIndexStore,值是 context.read,类型是 PostIndexStore。 在这个 onStretchTrigger 里面,先执行一下 postIndexStore 里的 reset ,重置一下,然后再执行一下它里面的 getPosts 这个方法,重新加载列表数据。

重新启动一下应用,在模拟器再 测试一下,拉伸这个视图,执行了 onStretchTrigger ,这次在控制台上会报一个错,这个错误跟重建小部件有关。

我们得这样改造一下,这里可以先用一下 WidgetsBinding.instance! 上面的 addPostFrameCallback 注册一个回调,在这个回调里可以执行 getPosts 获取内容列表数据。

重新启动一下应用。

然后打开应用的 Web 端,在管理这里,我可以选择发布一个新的内容项目,现在这个内容项目的状态是未发布,把它改成已发布。

在模拟器,向下拉伸这个视图,触发执行了 onStretchTrigger 以后,会执行 getPosts 重新获取内容列表数据,所以这里你会看到则刚发布的这个内容项目。

下拉刷新《 Flutter 移动端实例:滚动加载 》

统计

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

社会化网络

关于

微信订阅号

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