用户登录

打开 comment_index,在这个小部件里面可以加载内容列表需要的数据,把这个小部件转换成一个 StatefullWidget 。然后在文件顶部导入 provider 这个包。

在 State 类里面,添加一个 late CommentIndexStore,名字是 store,再添加一个 initState 方法,在这个方法里设置一下 store ,context.read,类型是 CommentIndexStore。

下面设置一下 store.reset() ,每次创建这个小部件的时候都会重置一下列表数据还有下一页的页码。

判断一下 widget.post != null,如果小部件的 post 属性的值不是 null,可以执行一下 store.setFilter,提供一个 Map,里面添加一个 'post' ,值是 widget.post! 里的 id 。这样请求内容列表数据的时候,得到的就是跟某个内容相关的评论。

下面再用一个 Future.microtask,提供一个回调,里面执行 store.getComments 这个方法。 滚动列表到底部的时候要加载新的列表数据,这里先添加一个滚动监听,用一下 store.scrollController.addListener,提供一个 onScroll 。

再添加一个 dispose 方法,在这个方法里,用一下 store.scrollController.removeListener ,删除掉滚动监听,把 onScroll 交给它。

在上面找个地方定义一下这个 onScroll 。在这个方法里判断一下,store.touchDown ,并且 store.hasMore,同时还要 !store.loading,满足条件,可以执行 store.getComments() 获取新的评论列表数据。

build

再修改一下 build 方法,让它 return 的是一个 Observer,提供一个 builder ,这个构建器 return 的东西可以用一个 CustomScrollView,它的 slivers 是一组 sliver 类型的小部件。

在上面声明一个 comments ,等于 store.comments ,如果它是 null,可以让 comments 等于 ObservableList.of ,提供一个空白的列表。

然后在这个 slivers 里面,先随便添加试一下,比如添加一个 SliverList 小部件,delegate 设置成 SliverChildBuilderDelegate,提供一个构建器,一个 context,一个 index 参数。

构建器里声明一个 comment,值是 comments 方括号 index,return 的是一个 Text 小部件,文字是 comment 里的 content 属性的值。

除了构建器,再添加一个 childCount 设置一下列表项目数量,这里就是 comments.length。

测试

按一下内容页面的评论小图标,在显示的底板上面会显示这个内容相关的评论列表。

加载与显示评论列表《 Flutter 移动端实例:评论列表 》

统计

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

社会化网络

关于

微信订阅号

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