flutter仿BOSS直聘（二），大前端技術實現

kimi_he發表於2019-01-20
Flutter前端

專案簡介

記得上一篇的寫作時間還在2018年2月份，已經很久沒更新了，而flutter的版本更新了好幾次，自flutter 1.0正式版推出之後，一直有打算把之前的專案重寫一下，因為flutter本身更新了許多新特性，老的已經是過去式了，也老有人來問我，之前的專案執行不了，是的，因為sdk太老了，而且之前的專案純粹是練手玩。

在過去的這段時間裡，踴躍出了很多關於flutter的技術文章和開源專案例子，基本上每天都有，同比RN剛出來時，熱情度遠超RN。於是，筆者懷著對新技術熱情的學習態度重寫了這個開源專案，並且後續也會不斷完善。

為什麼選仿BOSS直聘作為題材？ 因為這款APP相信大家都在使用，裡面元件繁多且有一定複雜度，能衍生出來許多基於flutter元件庫的子專案，裡面有些功能，比如地圖，IM，後面都會使用flutter來實現。為了讓專案更接近真實，這次連服務端也實現了。先把開源地址提供給大家：

github地址：

服務端版本：flutter仿boss直聘服務端.

flutter版本：flutter仿boss直聘.

專案效果圖：

img

相關技術點

服務端：

  • 基於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控制元件實現
  • 公共彈層元件封裝
  • 訊息列表控制元件封裝並實現測滑刪除功能

qq技術Flutter討論千人群號：468010872

img

聯絡方式

微信：heruijun2258，註明來意。

相關文章