Leo's Studio.

仿即刻Flutter版本

字数统计: 708阅读时长: 2 min
2019/08/07

题外话

即刻是我个人用的比较频繁的 APP 之一,但在我的手机一直有个 bug,播放视频时总是画面没有变化,需要手动推动下进度条才行,在更新了几个版本也没解决这个问题。再加上刚学了 Flutter,就尝试做了个 Flutter 版本的即刻,即刻页面比较多,所以没有完全开发完,只开发了首页的信息流,信息详情,视频播放等几个用的最多的页面。

接口用的是即刻的接口和图标,这里是为了学习,请勿用做其他用途,一切后果由自己承担,版权归即刻所有

因为我本身学习 Flutter 的时间也才几个月,所以代码质量还是有所欠缺的。

最近即刻被暂停服务了,所以 API 也调用不了,只能看看之前录制的片段。

源码地址:today

效果

国际惯例,先实现的效果图:

jike

这里面属首页的信息流最复杂,因为涉及了很多的样式,有几个花了时间实现的:

  • @ 人的效果,文字中有多个高亮显示的标签,点击可以跳转页面
  • 搜索栏和列表的嵌套滚动

第二个花时间的是个人详情页面中,整体页面的嵌套滚动。

实现

首先看下项目的整体结构,这里面代码整体重构过一次,之前使用 ScopedModel,后面觉得不太灵活,又换了相对热门的 Bloc 架构。

bloc

这个目录存放整个应用所有的 bloc 文件,按功能模块划分,最外层有一个 blocs 用于导出所有的 bloc 文件,每个模块中有四个文件,分别是:

  • bloc.dart:导出当前模块的 bloc
  • xxx_event.dart:bloc 中的 event
  • xxx_state.dart:bloc 中的 state
  • xxx_bloc.dart:处理逻辑

network

网络层的代码在 network 目录下,用的是 dio 框架,这个框架用起来比较方便,API 的封装有点类似 okhttp,这里也写了个拦截器 BusinessInterceptor 用于处理 token 信息。接口定义放在 ApiRequest 里面,相关的数据模型放在 model 目录下,用的是 json_serializable

UI

所有的页面存放在 ui 目录下,按功能模块划分,其中 ui_base.dart 存放一些基类,颜色常量等等。

flutterw

关于 Flutter 的版本问题,估计很多小伙伴也挺头疼的,特别是需要协作开发的。这里我自己写了一个类似 gradlew 的 flutterw,使用特定的版本的 Flutter 去编译,只需要将 flutter 改用为 flutterw 即可。

关于 flutterw 的更多介绍:解决Flutter版本不一致的flutterw

最后

模仿的页面不多,但还是花了不少时间去写的,talk is cheap show me the code。

CATALOG
  1. 1. 题外话
  2. 2. 效果
  3. 3. 实现
    1. 3.1. bloc
    2. 3.2. network
    3. 3.3. UI
    4. 3.4. flutterw
  4. 4. 最后