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

Myth丶恋晨 2022-03-10 07:07 227阅读 0赞

**Flutter-go 项目地址是：[https://github.com/alibaba/flutter-go][https_github.com_alibaba_flutter-go]**

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

### 拆解进度 ###

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

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

**[develop][]**  
![更多请点击链接查看.png][.png]

### 从入口开始 ###

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

查看源码我们可以看到`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`是如何使用的  
**[文档地址][Link 2]**

**集成**

方式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_github.com_alibaba_flutter-go]: https://github.com/alibaba/flutter-go
[develop]: https://github.com/alibaba/flutter-go/blob/master/develop.md
[.png]: /images/20220310/721fc4a8684b4421a34f53108193f942.png
[Link 1]: https://github.com/alibaba/flutter-go/blob/master/lib/main.dart
[Link 2]: https://pub.dartlang.org/packages/fluro