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