21.原生項目和Flutter的混合開發(二)

目錄傳送門：《Flutter快速上手指南》先導篇

在 混合開發(一) 中，咱們成功的在原生 Android 項目中引入了 Flutter，本篇咱們看看如何讓 Flutter 在原生 Android 應用中運行起來。

1. 改造 main.dart

首先，要讓 Flutter 的視圖能展現，須要改造一下 main.dart ，根據 name 的來建立對應的 Widget。

import 'dart:ui';
import 'package:flutter/material.dart';

void main() => runApp(_widgetForRoute(window.defaultRouteName));

Widget _widgetForRoute(String route) {
  switch (route) {
    case 'route1':
      return SomeWidget(...);
    case 'route2':
      return SomeOtherWidget(...);
    default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
      );
  }
}
複製代碼

在上面的例子中，經過 window 對象獲取了 defaultRouteName，這個值是由原生 Android 傳遞過來的。

在 Flutter 中，Window 是平臺用戶界面的抽象，其中包含了平臺的屬性。

2. 建立 FlutterView

Flutter 使用 FlutterView 來做爲容器，顯示 Flutter 的視圖。

FlutterView 其實是一個 SurfaceView （這是個坑比較多的 View），Flutter 會將內容直接繪製到 SurfaceView 上。

性能理論上來講，比 Android 提供的原生 View 確定會高。

看看如何建立一個 FlutterView 吧：

FlutterView flutterView = Flutter.createView(
   activity,
   getLifecycle(),
   "route0"
);
複製代碼

喔，它看起來很簡單。

最後一個參數 route0 就對應着前面所說的 window.defaultRouteName 的值了。

須要注意的是，在建立 FlutterView 的時候，須要提供一個 Lifecycle，用於監聽 Activity 的生命週期。

所以，你能夠直接使用 AppCompatActivity，它已經包含了一個 Lifecycle 實例。

或者，你能夠本身建立一個 Lifecycle，就像下面這樣：

public class SupportActivity extends Activity implements LifecycleOwner {

  private LifecycleRegistry lifecycle = new LifecycleRegistry(this);
}
複製代碼

FlutterView 做爲一個 SurfaceView 的子類，它也是一個 View。

所以，你能夠將它設置的足夠大，用來做爲一個頁面。

也能夠根據須要，直接插入到現有 ViewTree 的任何一個節點，做爲 Android 原生頁面中的一個 View。

靈活性仍是很高的，總之就像使用一個原生的View同樣使用它就行了。

下面的 gif 就是一個由原生 Android 應用跳轉到 Flutter 頁面的例子：

3. 繼續使用 Hot-Reload

你可能會擔憂，和原生的Android混合開發了以後，Hot-Reload 會不會不能用了？

固然不會！你仍然能夠繼續享用 Hot-Reload 帶來的良好編譯開發體驗。

// 進入你的 FlutterModule 目錄
$ cd some/path/my_flutter
// 運行 attach
$ flutter attach
Waiting for a connection from Flutter on Nexus 5X...
複製代碼

接着，在設備上啓動你的項目，而後進入到使用了 Flutter 的頁面，控制檯就會出現如下信息：

Done.
Syncing files to device Nexus 5X...                          5.1s

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on Nexus 5X is available at: http://127.0.0.1:59556/
For a more detailed help message, press "h". To quit, press "q".
複製代碼

如今，當你在 FlutterModule 中有任何的修改，只須要按下 r 就能看到變化。

在這種環境下，你能夠有如下幾種操做：

命令	功能
r	reload（熱重載）
R	restart（熱重啓）
q	退出

目錄傳送門：《Flutter快速上手指南》先導篇

如何找到我？

傳送門：CoorChice 的主頁

傳送門：CoorChice 的 Github