阿里 Flutter-go 项目拆解笔记（一）

2019年5月8日 167次阅读 来源: _龙衣

Flutter-go 项目地址是：https://github.com/alibaba/flutter-go

说说拆解 Flutter-go 项目的想法吧。
原本是计划看完基础直接撸一个 玩Android 客户端，但是刚好看到了这个项目。为了之后编写的Flutter代码能更加规范，而且能汲取大佬们的优秀思路，所以果断先研究一下一个 Flutter项目使如何设计和实现的，待拆解完成之后再撸《玩Android》客户端也不迟。

拆解进度

  • 完成入口的文件的分析
  • Router 路由的使用

文件目录结构(以LIb文件说明)

develop

《阿里 Flutter-go 项目拆解笔记（一）》 更多请点击链接查看.png

从入口开始

从上图可以知道入口文件是main.dart
点击查看源码

查看源码我们可以看到main.dart中主要实现的功能有

  • 数据的初始化
    数据库的初始化、搜索历史的初始化、Router 配置
void main() async {
  // 创建数据库
  final provider = new Provider();
  // 数据库初始化
  await provider.init(true);
  // 获取 SP 对象
  sp = await SpUtil.getInstance();
  // 得到单例对象的 搜索 管理对象
  new SearchHistoryList(sp);

  db = Provider.db;
  runApp(new MyApp());
}
  • 展示首页
    底部Tab页面实现（原来是显示欢迎介绍页面的）
  showWelcomePage() {
    // 暂时关掉欢迎介绍
    return AppPage();
//    bool showWelcome = sp.getBool(SharedPreferencesKeys.showWelcome);
//    if (showWelcome == null || showWelcome == true) {
//      return WelcomePage();
//    } else {
//      return AppPage();
//    }
  }

在 main.dart中主要还使用了第三方库fluro，进行路由。
下面看看fluro是如何使用的
文档地址

集成

方式1：
dependencies:
 fluro:  ^1.4.0

方式2：
dependencies:
 fluro:
   git: git://github.com/theyakka/fluro.git

然后点击右上角的`flutter packages upgrade`

使用

  1. 初始化final router = Router();
  2. 定义routes和handlers
var usersHandler = Handler(handlerFunc: (BuildContext context, Map<String, dynamic> params) {
// UsersScreen 页面中构造方法传参
  return UsersScreen(params["id"][0]);
});

void defineRoutes(Router router) {
  router.define("/users/:id", handler: usersHandler);

  // it is also possible to define the route transition to use
  // router.define("users/:id", handler: usersHandler, transitionType: TransitionType.inFromLeft);
}
  1. 开启导航。在main.dart文件中onGenerateRoute添加Application.router.generator
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    ...
      // 生成路由的回调函数，当导航的命名路由的时候，会使用这个来生成界面
      onGenerateRoute: Application.router.generator,
    );
  }
}
  1. 页面跳转
// 参数1：上下文
// 参数2：路径和传递的参数，
// 参数3：页面跳转的动画（Handler 中定义才存在）
// router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
router.navigateTo(context, "/users/1234");

通过以上4步，我们实现了页面跳转，以及参数的传递，这里的"/users/1234"中的1234是传递过去的id

    原文作者：_龙衣
    原文地址: https://www.jianshu.com/p/ed2fe26378a1
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞