为了账号安全,请及时绑定邮箱和手机立即绑定

用大前端技术实现的一款仿Boss直聘app(已开源)

标签:
前端工具

鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势。之前的RN,大家已经慢慢淡化,Github上Flutter开源的项目越来越多。今天是分享heruijun关于他用Flutter撸的一个仿Boss直聘项目。下面是正文:

项目简介

在过去的这段时间里,踊跃出了很多关于flutter的技术文章和开源项目例子,基本上每天都有,同比RN刚出来时,热情度远超RN。于是,笔者怀着对新技术热情的学习态度重写了这个开源项目,并且后续也会不断完善。

为什么选仿BOSS直聘作为题材?

因为这款APP相信大家都在使用,里面组件繁多且有一定复杂度,能衍生出来许多基于flutter组件库的子项目,里面有些功能,比如地图,IM,后面都会使用flutter来实现。为了让项目更接近真实,这次连服务端也实现了。先把开源地址提供给大家:

github地址:

项目效果图:

file

相关技术点

服务端:

基于puppeteer + mongo + nodejs实现爬虫服务器,使用nuxt + koa2 + vue实现服务端渲染以及api服务接口。这里就不过多占用篇幅了,本文主要还是讲flutter,对前端感兴趣的会另外分享相关技术话题。

flutter端:

项目中使用以下组件,请记住一句咒语:flutter一切皆组件。
Container, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator, BottomNavigationBar, GesureDetector, Listener, CircleAvatar等以及一些自定义组件。

布局语义化,不滥用布局组件,并尽量简化组件嵌套结构

技术细节

实现启动画面,在启动1.5秒后,跳转到app里,并且把启动画面的路由remove掉。

Navigator.of(context).pushAndRemoveUntil(

PageRouteBuilder<Null>(
  pageBuilder: (BuildContext context, Animation<double> animation,
      Animation<double> secondaryAnimation) {
    return AnimatedBuilder(
      animation: animation,
      builder: (BuildContext context, Widget child) {
        return Opacity(
          opacity: animation.value,
          child: new MainPage(title: 'Boss直聘'),
        );
      },
    );
  },
  transitionDuration: Duration(milliseconds: 300),
),
(Route route) => route == null);

列表页面,没啥好说的,ListView大家应该都用过,只是需要记住一点,列表再跳转详情时需要记录当前列表的滚动位置,只需加入以下代码即可:

key: new PageStorageKey(‘key-name’)

Hero动画,在详情页面里,用了2处Hero动画,Hero动画是在route切换过程中执行的动画。需要当前页和目标页一一对应起来。

Hero(
tag: heroLogo,
child: ClipRRect(
borderRadius: new BorderRadius.circular(8.0),
child: Image.network(
widget.company.logo,
width: 70,
height: 70,
),
),
)),

CustomListView滑动时appBar显示隐藏title。大家都知道,flexibleSpace里的CollapseMode.parallax属性可以在屏幕滚动时把title移动到appBar里,可实际上,布局是定制的,实现不了官方的那种效果,于是通过监听ScrollController并计算滚动位置的方式修改state属性让appBar的title根据滚动位置显示隐藏。

_scrollListener() {
setState(() {
if (_scrollController.offset < 56 && _isShow) {
_isShow = false;
} else if (_scrollController.offset >= 56 && _isShow == false) {
_isShow = true;
}
});
}

TODO-LIST

公司详情页slidePanel控件实现

公共弹层组件封装

消息列表控件封装并实现测滑删除功能

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消