阿里 Flutter-go 項目拆解筆記（一）

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

說說拆解 Flutter-go 項目的想法吧。
原本是計劃看完基礎直接擼一個 玩Android 客戶端，但是剛好看到了這個項目。爲了之後編寫的Flutter代碼能更加規範，而且能汲取大佬們的優秀思路，所以果斷先研究一下一個 Flutter項目使如何設計和實現的，待拆解完成之後再擼《玩Android》客戶端也不遲。

拆解進度

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

文件目錄結構(以LIb文件說明)

develop

從入口開始

從上圖可以知道入口文件是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);
}

3. 開啓導航。在main.dart文件中onGenerateRoute添加Application.router.generator

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
    ...
      // 生成路由的回調函數，當導航的命名路由的時候，會使用這個來生成界面
      onGenerateRoute: Application.router.generator,
    );
  }
}

4. 頁面跳轉

// 參數1：上下文
// 參數2：路徑和傳遞的參數，
// 參數3：頁面跳轉的動畫（Handler 中定義才存在）
// router.navigateTo(context, "/users/1234", transition: TransitionType.fadeIn);
router.navigateTo(context, "/users/1234");

通過以上4步，我們實現了頁面跳轉，以及參數的傳遞，這裏的"/users/1234"中的1234是傳遞過去的id