用大前端技术实现的一款仿Boss直聘app（已开源）

最新推荐文章于 2024-11-18 10:34:10 发布

原创最新推荐文章于 2024-11-18 10:34:10 发布 · 430 阅读

1 ·

CC 4.0 BY-SA版权

本文分享了使用Flutter重写Boss直聘应用的过程，详细介绍了项目的技术细节，包括启动画面、列表页面、Hero动画和自定义组件。项目不仅涵盖了前端技术，还实现了服务端功能，展示了Flutter在移动开发领域的强大能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击上方“何俊林”，马上关注，每天早上8:50准时推送

真爱，请置顶或星标

鱼哥从去年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

项目效果图：

技术细节

实现启动画面，在启动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;
      }
    });
  }