android原生和flutter混合时打apk flutter和原生混合开发

转载

桃太郎 2023-09-12 20:51:05

文章标签 移动开发 Android flutter 混合开发 文章分类 Android 移动开发

目录传送门：《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

性能理论上来说，比 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

因此，你可以将它设置的足够大，用来作为一个页面。

也可以根据需要，直接插入到现有 ViewTree 的任何一个节点，作为 Android 原生页面中的一个 View。

灵活性还是很高的，总之就像使用一个原生的View一样使用它就好了。

下面的 gif

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 就能看到变化。

在这种环境下，你可以有以下几种操作：