rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app(已开源)
鱼哥从去年8月我参加GDD(谷歌开发者大会)后,Flutter在一年中,版本迭代频繁,很多没有的功能都逐渐有了,很多从事移动端开发的,目前面临巨大冲击,因为大前端不是喊口号,而是确实能有巨大优势。之前的RN,大家已经慢慢淡化,Github上Flutter开源的项目越来越多。今天是分享heruijun关于他用Flutter撸的一个仿Boss直聘项目。下面是正文:
项目简介
在过去的这段时间里,踊跃出了很多关于flutter的技术文章和开源项目例子,基本上每天都有,同比RN刚出来时,热情度远超RN。于是,笔者怀着对新技术热情的学习态度重写了这个开源项目,并且后续也会不断完善。
为什么选仿BOSS直聘作为题材?
因为这款APP相信大家都在使用,里面组件繁多且有一定复杂度,能衍生出来许多基于flutter组件库的子项目,里面有些功能,比如地图,IM,后面都会使用flutter来实现。为了让项目更接近真实,这次连服务端也实现了。先把开源地址提供给大家:
github地址:
服务端版本:https://github.com/heruijun/flutter-boss-server
flutter版本:https://github.com/heruijun/flutter_boss
项目效果图:
相关技术点
服务端:
基于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控件实现
公共弹层组件封装
消息列表控件封装并实现测滑删除功能
欢迎关注我的微信公众号「码农突围」,接收第一手技术干货
rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app(已开源)相关推荐
- rn 实现上下滑动选择列表_RN-实现抖音切换视频效果
实现效果 1.上下滑动切换 2. 左滑动弹出列表,右滑动取消列表 3.加载更多.刷新 实现效果 思路 通过滑动的x.y判断是上下滑动还是左右滑动 1.上下滑动 滑动中:通过 flatList.scro ...
- boss直聘Android找工作界面,Android仿Boss直聘我的界面滑动效果
最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. image 其实我们拿到这个效果的时候,看到滑动,折 ...
- boss直聘Android找工作界面,仿Boss直聘我的界面滑动效果
好久没有写博客了,最近在找工作,我在使用boss投简历的时候,看到boss的我的界面蛮有意思的,就想如何去实现它,可能是职业病吧,所以就打算仿一下.先看下仿的效果. 其实我们拿到这个效果的时候,看到滑 ...
- 飞机大战boss入场代码_他又来了,BOSS直聘和国足谁先出线卡塔尔?
9月5日,卡塔尔世界杯预选赛亚洲区40强赛正式打响,中国队迎来5:0开门红,刚刚归化的球员艾克森也获得了身披国家队战袍的首粒进球.上次国足出线还是十七年前,这次又站在世预赛的起点线,迎来了新的足协主席 ...
- boss直聘怎么发招聘信息_被聘为开发人员:高级招聘人员的提示
boss直聘怎么发招聘信息 There's no magic bullet for getting hired as a developer. But there is some great advi ...
- boss直聘一句话介绍优势_「公关界的007」95后职场前夜,BOSS直聘想跟够“敢”的你聊聊...
史上最难求职季又双叒叕来了,校招接近尾声,传说中的offer收割机似乎都消失了,取而代之的是某瓣985FIVE小组每天上百的加组申请--"毕业即失业"的魔咒在今年被成千上百倍地放大 ...
- ajax获得excel文件流在前端打开_主流前端技术讲解,面试必考!
Vue.js是Web前端的一个框架,用来快速开发单页面应用.当Vue.js开发变成主流的时候,许多公司的技术团队都打算把下一个新项目换成用Vue.js来开发. 但是当我们详细了解Vue.js以后,会发 ...
- 山寨风,高仿QQ附近的人筛选功能的滑动选择列表来袭!
今天在准备新项目的界面,偶然翻到了QQ附近的人那个筛选功能,嗯,觉得效果还不错,效果大概是这样子的.QQ的原图我就不上了,我就上我做的效果图. 觉得so easy是吧,但是我整整做了4个多小时,个多小 ...
- mysql虚拟列表_「前端进阶」高性能渲染十万条数据(虚拟列表)
前言 在工作中,有时会遇到需要一些不能使用分页方式来加载列表数据的业务情况,对于此,我们称这种列表叫做长列表.比如,在一些外汇交易系统中,前端会实时的展示用户的持仓情况(收益.亏损.手数等),此时对于 ...
最新文章
- Fire uva 11624
- Bug总结:python语言中出现的import error错误的解决思路
- conductor任务域
- boot spring 怎么执行hql_Intellij如何使用Spring Boot正确配置hql。现在我得到持久性QL查询已进行错误检查...
- java程序退出自动保存_你知道如何自动保存 Spring Boot 应用进程号吗
- python接口自动化(二)--什么是接口测试、为什么要做接口测试(详解)
- mysql8.0日期类型_mysql8.0.19基础数据类型详解
- shell脚本练习实例
- 洛谷 P4568 [JLOI2011]飞行路线
- 什么能让我们用青春、用生命去垫付?
- IEEE论文格式要求(翻译)
- 第七版自顶向下 第一章中文版 计算机网络课后习题答案
- 关于平面设计海报怎么做?——黎乙丙
- COM 组件创建实例失败,原因是出现以下错误: 8001010a解决办法
- 大数据学习零基础能够学会不?
- AI未来是什么样子,这些科幻电影里已经有了答案
- 安卓APP源码和设计报告——小说阅读器
- 2021年安全员-B证(广西省-2021版)考试技巧及安全员-B证(广西省-2021版)
- 透彻分析微信公众平台三大矛盾
- 6.3 GitHub - 维护项目