Flutter开发Feed流笔记二

最新推荐文章于 2024-05-05 16:16:58 发布

原创

最新推荐文章于 2024-05-05 16:16:58 发布 · 782 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#feed

这篇博客详细记录了使用Flutter仿照贝壳找房app的看点页开发Feed流的过程，涉及UI组件如tabbar、tabbarview和ListView的使用，以及Dio进行http通信、json_serializable处理JSON数据、flutter_refresh实现刷新加载功能。在开发中遇到了tabbarview状态丢失和标签间距设置的问题，并给出了相应的解决方案。完整代码可在GitHub找到。

在这里插入图片描述

仿照贝壳找房app看点页实现feed流功能。

UI使用了：tabbar+tabbarview+ListView
http通讯：Dio
json：json_serializable
下载刷新/加载更多：flutter_refresh

遇到问题：
1、 tabbarview在切换标签页后，前一个标签页的状态会丢失。其实TabbarView也是用的PageView，只需要继承mixin类AutomaticKeepAliveClientMixin并设置wantKeepAlive为true。原理类似于安卓的ViewPager的pagelimit。

class ContentWidget extends StatefulWidget {
  List dataItems;

  ContentWidget({Key key, this.title, this.dataItems}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case t