Flutter学写个NIO APP(一，NIO首页结构)

转载请著名出处王亟亟的大牛之路

源码地址：https://github.com/ddwhan0123/flutter_tutorial

强烈建议在看这篇文章之前学完https://book.flutterchina.club/，这样基本就能带着自己的理解去看我的解释和思路，事半功倍哦！(不是广告，我自己也看 觉得翻译得不错)

去年到现在

去年下半年到现在一直在做React Native相关到工作，大半年H5相关的工作没怎么碰甚至Native写的也比较少。18年8月到12月基本都是处于一个赶业务的状态，需求和要做的业务内容还是比较多的。18年底到现在基本上是一个内部私有库建设+代码优化+需求调整的一个阶段。但是明显感觉到team会在今年投产在Flutter上面，所以接下来一段时间会花在Flutter/Dart的学习上。

---

我对Flutter的认知

我是从去年下半年开始学习的，但是不是学习的太系统，断断续续的那种。
网上其实有大量的Flutter和纯原生的比较和RN的比较和H5的比较，在这里我就不提了。身边也有一些抵触一套代码多处使用的声音，当然这种声音大多是从iOS和部分安卓开发身上听到的，但是资本市场和信仰往往走不到一起。

• 可以节约人力投入，大多数的应用场景已经可以应付
• 逻辑统一，完全避免了“安卓没有这个逻辑问题，苹果有”的问题。看仔细！逻辑问题，兼容性的问题一样巨大
• Bug有，API设计不是太合理
• 学习使我快乐，Dart语法并不难读

---

运行效果

完成一个响应滑动的顶部菜单，一个底部点击切换的tab，一系列子页面容器，一个简单的列表。

---

结构分析

最外层容器（蓝色部分）承载着一个类似于BottomNavigation的自定义控件，里面包裹着5个内页，图中为第一页的内容。

红色部分为第一页的AppBar，实现了左侧按钮leading，右侧按钮actions，中间是拦截滑动手势的TabBarView

灰色+黄色+绿色分别是三个独立的ViewGroup，他们组成第一个页面ListView中的一个item

---

事先准备-路由

路由使用的是第三方库fluro

• 支持“地址跳转”
• 支持跳转传参，返回回调等业务场景
• 支持自定义路由拦截

安装

项目pubspec.yaml文件dependencies节点下，如

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.2
  fluttertoast: ^3.0.1
  fluro: "^1.4.0"

初始化：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //main.dart容器类的构造函数里初始化路由
  MyApp() {
    final router = new Router();
    Routes.configureRoutes(router);
    Application.router = router;
  }
  @override
  Widget build(BuildContext context) {
    ....
    return app;
  }
}

新建静态路由类Application

import 'package:fluro/fluro.dart';

class Application {
  static Router router;
}

新建路由定义类Routes

class Routes {
  //根结点