简介: 2 年前, RN 刚出来时做了个仿拉钩的 demo,react-native-lagou. 这次 flutter 来了, 想感受一下, 索性用目前 flutter 的版本写的一个仿 boss 直聘应用 时间有限, 没完全仿照, 去掉了一些功能, 但是界面风格一致, 有参考价值 github 地址: flutter 仿 boss 直聘.
感悟
与一些文章里介绍的非常相似, 如果会 RN, 那么学起来会很快, flutter 借鉴了 RN 的组件化思想, 路由机制, 状态机等
Dart 语法有些奇葩, 但掌握之后, 开发效率会很快, 整个 demo 加起来开发了 2 天不到
可以同时在 android 和 ios 运行
性能很快, 超过 RN, 因为没有 bridge 层
还是要多看官方文档和源码, 才能碰到问题解决
IDE 还不是很友好, hot reload 有时无效
还是比 RN 要复杂一些的
先上效果
部署到手机
确保 flutter 正确安装之后, 进入目录运行 flutter run --release
涉及技术点
Theme 主题设置
- theme: new ThemeData(
- primaryIconTheme: const IconThemeData(color: Colors.white),
- brightness: Brightness.light,
- primaryColor: new Color.fromARGB(255, 0, 215, 198),
- accentColor: Colors.cyan[300],
- )
自定义 TabBar
- @override
- Widget build(BuildContext context) {
- assert(debugCheckHasMaterial(context));
- double height = _kTextAndIconTabHeight;
- Widget label = new Column(
- mainAxisAlignment: MainAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: <Widget>[
- new Container(
- child: new Image(
- image: new AssetImage(this.icon),
- height: 30.0,
- width: 30.0,
- ),
- margin: const EdgeInsets.only(bottom: _kMarginBottom),
- ),
- _buildLabelText()
- ]
- );
- }
MD 风格及一些组件应用
- new SliverAppBar(
- expandedHeight: _appBarHeight,
- pinned: _appBarBehavior == AppBarBehavior.pinned,
- floating: _appBarBehavior == AppBarBehavior.floating ||
- _appBarBehavior == AppBarBehavior.snapping,
- snap: _appBarBehavior == AppBarBehavior.snapping,
- flexibleSpace: new FlexibleSpaceBar(
- title: new Text(_company.name,
- style: new TextStyle(color: Colors.white)),
- background: new Stack(
- fit: StackFit.expand,
- children: <Widget>[
- new Image.network(
- 'https://img.bosszhipin.com/beijin/mcs/chatphoto/20170725/861159df793857d6cb984b52db4d4c9c.jpg',
- fit: BoxFit.cover,
- height: _appBarHeight,
- ),
- ],
- ),
- ),
- )
解决了官方 demo 里路由跳转效果卡顿的问题
- Navigator.of(context).push(new PageRouteBuilder(
- opaque: false,
- pageBuilder: (BuildContext context, _, __) {
- return new CompanyDetail(company);
- },
- transitionsBuilder: (_, Animation<double> animation, __, Widget child) {
- return new FadeTransition(
- opacity: animation,
- child: new SlideTransition(position: new Tween<Offset>(
- begin: const Offset(0.0, 1.0),
- end: Offset.zero,
- ).animate(animation), child: child),
- );
- }
- ));
- TODO
下拉筛选组件
mock server, 模拟真实请求
分页
目录结构调整, 更符合生产环境
viewpager 轮播图
路由机制封装
来源: https://juejin.im/post/5aa91fb35188257ddb0f511b