魚(yú)哥從去年8月我參加GDD（谷歌開(kāi)發(fā)者大會(huì)）后，Flutter在一年中，版本迭代頻繁，很多沒(méi)有的功能都逐漸有了，很多從事移動(dòng)端開(kāi)發(fā)的，目前面臨巨大沖擊，因?yàn)榇笄岸瞬皇呛翱谔?hào)，而是確實(shí)能有巨大優(yōu)勢(shì)。之前的RN，大家已經(jīng)慢慢淡化，Github上Flutter開(kāi)源的項(xiàng)目越來(lái)越多。今天是分享heruijun關(guān)于他用Flutter擼的一個(gè)仿Boss直聘項(xiàng)目。下面是正文：

項(xiàng)目簡(jiǎn)介

在過(guò)去的這段時(shí)間里，踴躍出了很多關(guān)于flutter的技術(shù)文章和開(kāi)源項(xiàng)目例子，基本上每天都有，同比RN剛出來(lái)時(shí)，熱情度遠(yuǎn)超RN。于是，筆者懷著對(duì)新技術(shù)熱情的學(xué)習(xí)態(tài)度重寫(xiě)了這個(gè)開(kāi)源項(xiàng)目，并且后續(xù)也會(huì)不斷完善。

為什么選仿BOSS直聘作為題材？

因?yàn)檫@款A(yù)PP相信大家都在使用，里面組件繁多且有一定復(fù)雜度，能衍生出來(lái)許多基于flutter組件庫(kù)的子項(xiàng)目，里面有些功能，比如地圖，IM，后面都會(huì)使用flutter來(lái)實(shí)現(xiàn)。為了讓項(xiàng)目更接近真實(shí)，這次連服務(wù)端也實(shí)現(xiàn)了。先把開(kāi)源地址提供給大家：

github地址：

服務(wù)端版本：https://github.com/heruijun/flutter-boss-server

flutter版本：https://github.com/heruijun/flutter_boss

項(xiàng)目效果圖：

相關(guān)技術(shù)點(diǎn)

服務(wù)端：

基于puppeteer + mongo + nodejs實(shí)現(xiàn)爬蟲(chóng)服務(wù)器，使用nuxt + koa2 + vue實(shí)現(xiàn)服務(wù)端渲染以及api服務(wù)接口。這里就不過(guò)多占用篇幅了，本文主要還是講flutter，對(duì)前端感興趣的會(huì)另外分享相關(guān)技術(shù)話題。

flutter端：

項(xiàng)目中使用以下組件，請(qǐng)記住一句咒語(yǔ)：flutter一切皆組件。Container, Row, Column, Flex, ListView, CustomListView, Wrap, Padding, Center, Future, FutureBuilder, Expanded, Navigator, BottomNavigationBar, GesureDetector, Listener, CircleAvatar等以及一些自定義組件。

布局語(yǔ)義化，不濫用布局組件，并盡量簡(jiǎn)化組件嵌套結(jié)構(gòu)

技術(shù)細(xì)節(jié)

實(shí)現(xiàn)啟動(dòng)畫(huà)面，在啟動(dòng)1.5秒后，跳轉(zhuǎn)到app里，并且把啟動(dòng)畫(huà)面的路由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);

列表頁(yè)面，沒(méi)啥好說(shuō)的，ListView大家應(yīng)該都用過(guò)，只是需要記住一點(diǎn)，列表再跳轉(zhuǎn)詳情時(shí)需要記錄當(dāng)前列表的滾動(dòng)位置，只需加入以下代碼即可：

key: new PageStorageKey('key-name')

Hero動(dòng)畫(huà)，在詳情頁(yè)面里，用了2處Hero動(dòng)畫(huà)，Hero動(dòng)畫(huà)是在route切換過(guò)程中執(zhí)行的動(dòng)畫(huà)。需要當(dāng)前頁(yè)和目標(biāo)頁(yè)一一對(duì)應(yīng)起來(lái)。

Hero(

tag: heroLogo,

child: ClipRRect(

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

)),

CustomListView滑動(dòng)時(shí)appBar顯示隱藏title。大家都知道，flexibleSpace里的CollapseMode.parallax屬性可以在屏幕滾動(dòng)時(shí)把title移動(dòng)到appBar里，可實(shí)際上，布局是定制的，實(shí)現(xiàn)不了官方的那種效果，于是通過(guò)監(jiān)聽(tīng)ScrollController并計(jì)算滾動(dòng)位置的方式修改state屬性讓appBar的title根據(jù)滾動(dòng)位置顯示隱藏。

_scrollListener() {

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

TODO-LIST

公司詳情頁(yè)slidePanel控件實(shí)現(xiàn)

公共彈層組件封裝

消息列表控件封裝并實(shí)現(xiàn)測(cè)滑刪除功能

歡迎關(guān)注我的微信公眾號(hào)「碼農(nóng)突圍」，接收第一手技術(shù)干貨

總結(jié)

以上是生活随笔為你收集整理的rn 实现上下滑动选择列表_用大前端技术实现的一款仿Boss直聘app（已开源）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。