魚哥從去年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（已开源）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。