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

項目簡介

記得上一篇的寫做時間還在2018年2月份，已經好久沒更新了，而flutter的版本更新了好幾回，自flutter 1.0正式版推出以後，一直有打算把以前的項目重寫一下，由於flutter自己更新了許多新特性，老的已是過去式了，也老有人來問我，以前的項目運行不了，是的，由於sdk太老了，並且以前的項目純粹是練手玩。

在過去的這段時間裏，踊躍出了不少關於flutter的技術文章和開源項目例子，基本上天天都有，同比RN剛出來時，熱情度遠超RN。因而，筆者懷着對新技術熱情的學習態度重寫了這個開源項目，而且後續也會不斷完善。

爲何選仿BOSS直聘做爲題材？ 由於這款APP相信你們都在使用，裏面組件繁多且有必定複雜度，能衍生出來許多基於flutter組件庫的子項目，裏面有些功能，好比地圖，IM，後面都會使用flutter來實現。爲了讓項目更接近真實，此次連服務端也實現了。先把開源地址提供給你們：

github地址：

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

flutter版本：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控件實現
• 公共彈層組件封裝
• 消息列表控件封裝並實現測滑刪除功能

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

聯繫方式

微信：heruijun2258，註明來意。