[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-9498":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":16,"starSnapshotCount":16,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},9498,"flutter_boss","heruijun\u002Fflutter_boss","heruijun","flutter仿BOSS直聘（二），大前端技术实现","",null,"Dart",976,239,33,13,0,48.14,false,"master",true,[],"2026-06-12 04:00:45","# flutter仿BOSS直聘（二），大前端技术实现\n\n## 项目简介\n记得上一篇的写作时间还在2018年2月份，已经很久没更新了，而flutter的版本更新了好几次，自flutter 1.0正式版推出之后，一直有打算把之前的项目重写一下，因为flutter本身更新了许多新特性，老的已经是过去式了，也老有人来问我，之前的项目运行不了，是的，因为sdk太老了，而且之前的项目纯粹是练手玩。\n\n在过去的这段时间里，踊跃出了很多关于flutter的技术文章和开源项目例子，基本上每天都有，同比RN刚出来时，热情度远超RN。于是，笔者怀着对新技术热情的学习态度重写了这个开源项目，并且后续也会不断完善。\n\n为什么选仿BOSS直聘作为题材？\n因为这款APP相信大家都在使用，里面组件繁多且有一定复杂度，能衍生出来许多基于flutter组件库的子项目，里面有些功能，比如地图，IM，后面都会使用flutter来实现。为了让项目更接近真实，这次连服务端也实现了。先把开源地址提供给大家：\n\n## github地址：\n服务端版本：[flutter仿boss直聘服务端](https:\u002F\u002Fgithub.com\u002Fheruijun\u002Fflutter-boss-server).\n\nflutter版本：[flutter仿boss直聘](https:\u002F\u002Fgithub.com\u002Fheruijun\u002Fflutter_boss).\n\n## 项目效果图：\n![img](https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2019\u002F1\u002F20\u002F1686a0c4b2fb9cda?w=252&h=528&f=gif&s=1194865)\n\n## 相关技术点\n服务端：\n* 基于puppeteer + mongo + nodejs实现爬虫服务器，使用nuxt + koa2 + vue实现服务端渲染以及api服务接口。这里就不过多占用篇幅了，本文主要还是讲flutter，对前端感兴趣的会另外分享相关技术话题。\n\nflutter端：\n* 项目中使用以下组件，请记住一句咒语：flutter一切皆组件。\nContainer, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator, BottomNavigationBar, GesureDetector, Listener, CircleAvatar等以及一些自定义组件。\n* 布局语义化，不滥用布局组件，并尽量简化组件嵌套结构\n\n## 技术细节\n* 实现启动画面，在启动1.5秒后，跳转到app里，并且把启动画面的路由remove掉。\n\n```\nNavigator.of(context).pushAndRemoveUntil(\n    PageRouteBuilder\u003CNull>(\n      pageBuilder: (BuildContext context, Animation\u003Cdouble> animation,\n          Animation\u003Cdouble> secondaryAnimation) {\n        return AnimatedBuilder(\n          animation: animation,\n          builder: (BuildContext context, Widget child) {\n            return Opacity(\n              opacity: animation.value,\n              child: new MainPage(title: 'Boss直聘'),\n            );\n          },\n        );\n      },\n      transitionDuration: Duration(milliseconds: 300),\n    ),\n    (Route route) => route == null);\n```\n\n* 列表页面，没啥好说的，ListView大家应该都用过，只是需要记住一点，列表再跳转详情时需要记录当前列表的滚动位置，只需加入以下代码即可：\n`key: new PageStorageKey('key-name')`\n\n* Hero动画，在详情页面里，用了2处Hero动画，Hero动画是在route切换过程中执行的动画。需要当前页和目标页一一对应起来。\n\n```\nHero(\n  tag: heroLogo,\n  child: ClipRRect(\n    borderRadius: new BorderRadius.circular(8.0),\n    child: Image.network(\n      widget.company.logo,\n      width: 70,\n      height: 70,\n    ),\n  ),\n)),\n```\n\n* CustomListView滑动时appBar显示隐藏title。大家都知道，flexibleSpace里的CollapseMode.parallax属性可以在屏幕滚动时把title移动到appBar里，可实际上，布局是定制的，实现不了官方的那种效果，于是通过监听ScrollController并计算滚动位置的方式修改state属性让appBar的title根据滚动位置显示隐藏。\n\n```\n _scrollListener() {\n    setState(() {\n      if (_scrollController.offset \u003C 56 && _isShow) {\n        _isShow = false;\n      } else if (_scrollController.offset >= 56 && _isShow == false) {\n        _isShow = true;\n      }\n    });\n  }\n```\n\n## TODO-LIST\n* 公司详情页slidePanel控件实现\n* 公共弹层组件封装\n* 消息列表控件封装并实现测滑删除功能\n\n## qq技术Flutter讨论千人群号：468010872\n![img](https:\u002F\u002Fuser-gold-cdn.xitu.io\u002F2019\u002F1\u002F20\u002F1686a0d003f4a331?w=541&h=741&f=jpeg&s=55386)\n\n## 联系方式\n微信：heruijun2258，注明来意。","该项目是一个使用Flutter框架仿制BOSS直聘应用的大前端技术实现。它通过Dart语言构建，集成了多种核心功能和技术特点，如丰富的UI组件（Container, Row, Column等）、Hero动画、以及自定义列表视图等，旨在展示Flutter的强大能力和灵活性。项目特别注重布局语义化和减少不必要的组件嵌套以提高性能。此外，还实现了服务端部分，包括爬虫服务器和服务端渲染等功能，使得整个应用更加贴近真实场景。适合于对Flutter感兴趣并希望深入学习其在复杂应用开发中如何应用的开发者，或是想要了解如何从零开始构建一个完整移动应用的技术爱好者参考使用。",2,"2026-06-11 03:23:08","top_language"]