來了！Flutter混合開發專題一

時間  2019-11-06
標籤 flutter 混合 開發 專題 简体版
原文   原文鏈接

前言

Flutter做爲新一代移動端跨平臺解決方案，相比於React Native等有很大的性能優點，因此不少公司已經開始研究Flutter並將其應用於實際項目中，目前包括閒魚、美團、京東和今日頭條等都已經在APP部分頁面嘗試使用了，那麼它們這些應用都已經使用原生開發的很成熟了且代碼量很是大，若是全面使用Flutter改造勢必是一個浩大的工程，因此他們都使用Flutter混合開發的模式漸進式的對部分頁面進行改造。html

接下來幾篇文章咱們將分析若干種混合開發方案來爲你們在現有APP中引入Flutter作參考。本篇咱們將先介紹Flutter官方提供的混合開發集成方案。java

官方集成方案

官方提供的集成步驟詳見：android

github.com/flutter/flu…ios

根據官方集成方案將Flutter集成到現有APP工程中會有一些小問題在，後邊集成的過程當中會提到。如下集成步驟咱們假定現有安卓和iOS的APP工程分別爲flutter_host_android和flutter_host_ios，兩個工程放在同一目錄下，以下git

some/path/
  flutter_host_android/
  flutter_host_ios/
複製代碼

注意：github

如下工程的建立基於Flutter channel爲 stable 1.2.1版本shell

建立Flutter工程

根據官方說明，咱們須要建立一個Flutter module工程（是module而不是app），命令行定位到以上some/path/目錄下，使用以下命令建立編程

flutter create --org=com.flutterbus.app --type=module flutter_module
複製代碼

建立完成後flutter_module工程和安卓、iOS的APP工程在同一目錄中，結構以下api

some/path/
  flutter_host_android/
  flutter_host_ios/
  flutter_module/
複製代碼

使用Android Studio打開flutter_module項目，目錄結構以下xcode

從目錄結構中咱們能夠看出Flutter module項目中的安卓和iOS工程和Flutter app項目中的不一樣，他們都是隱藏的工程，其實官方是不建議在這兩個原生工程中添加任何平臺代碼的，這兩個工程用於對Flutter項目進行測試。

根據模板生成的main.dart中的代碼不是圖中這樣的，咱們稍微作了一些修改，僅供參考，這裏的defaultRouteName是由平臺原生層傳入的routeName，咱們能夠根據不一樣的routeName展現不一樣的頁面Widget。這裏面的代碼修改後邊再作說明，下面咱們看一下具體的集成步驟。

安卓集成

Flutter工程下的aar產物構建

在將flutter_module項目集成到安卓原生工程flutter_host_android以前，須要先將flutter_module項目中的安卓工程構建出一個aar，命令行切換到flutter_module目錄下，執行如下命令

cd .android
./gradlew assembleDebug
複製代碼

執行完成後.android/Flutter/build/output/aar/目錄下就會有一個flutter-debug.aar產物生成。

原生工程配置

修改原生工程flutter_host_android下的app module中的build.gradle，在android{}配置中添加一下內容

compileOptions {
  sourceCompatibility 1.8
  targetCompatibility 1.8
}
複製代碼

必須添加，不然在執行':app:mergeExtDexDebug'任務時會報以下錯誤

org.gradle.api.UncheckedIOException: Failed to capture fingerprint of input files for task ':app:mergeExtDexDebug' property 'dexFiles' during up-to-date check.
	at org.gradle.api.internal.changedetection.state.CacheBackedTaskHistoryRepository.fingerprintTaskFiles(CacheBackedTaskHistoryRepository.java:360)
	...
Caused by: com.android.builder.dexing.DexArchiveBuilderException: Error while dexing.
The dependency contains Java 8 bytecode. Please enable desugaring by adding the following to build.gradle
android {
    compileOptions {
        sourceCompatibility 1.8
        targetCompatibility 1.8
    }
}
See https://developer.android.com/studio/write/java8-support.html for details. Alternatively, increase the minSdkVersion to 26 or above.

	at com.android.builder.dexing.D8DexArchiveBuilder.getExceptionToRethrow(D8DexArchiveBuilder.java:124)
	...
複製代碼

而後再工程的settings.gradle中增長以下代碼

// 這句應該已經存在了
include ':app'

//增長內容
setBinding(new Binding([gradle: this]))
evaluate(new File(
        settingsDir.parentFile,
        'flutter_module/.android/include_flutter.groovy'
))
複製代碼

根據include_flutter.groovy中的內容，這段配置就是將flutter_module中安卓flutter module自身和所依賴的插件包含進settings.gradle的上下文中，以便於app module配置對「:flutter」的依賴。

在app的build.gradle中添加「:flutter」依賴

dependencies {
  .
  .
  implementation project(':flutter')
}
複製代碼

配置完成後，點擊同步按鈕，這時就可使用flutter_module中提供的工具類了。

原生和Flutter交互

flutter_host_android工程的java源碼包下新建一個FlutterDemoActivity類，onCreate方法中的實現以下

public static final String CHANNEL_NAME = "com.flutterbus/demo";

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

		// 獲取由上一個頁面傳過來的routeName
        String routeName = "";
        Intent intent = getIntent();
        if (intent != null && intent.getExtras() != null) {
            routeName = intent.getExtras().getString("routeName");
        }

		 // 根據指定routeName建立FlutterView用來展現對應dart中的Widget
        FlutterView flutterView = Flutter.createView(this, this.getLifecycle(), routeName);
        
        // 建立Platform Channel用來和Flutter層進行交互
        new MethodChannel(flutterView, CHANNEL_NAME).setMethodCallHandler(new MethodChannel.MethodCallHandler() {
            @Override
            public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
                methodCall(methodCall, result);
            }
        });
        setContentView(flutterView);
    }
    
    /**
     * 處理dart層傳來的方法調用
     */
    private void methodCall(MethodCall call, MethodChannel.Result result) {
        if (call.method.equals("gotoNativePage")) {
            startActivity(new Intent(this, NativeActivity.class));
            result.success(true);
        } else {
            result.notImplemented();
        }
    }
複製代碼

從安卓原生頁面跳轉到FlutterDemoActivity頁面使用以下方法將routeName傳遞過去

Intent intent = new Intent(this, FlutterDemoActivity.class);
Bundle bundle = new Bundle();
bundle.putString("routeName", "first");
intent.putExtras(bundle);
startActivity(intent);
複製代碼

routeName在Flutter端是如何起到做用的呢，能夠看下Flutter module中dart代碼

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

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

java中建立FlutterView時其實就是將routeName設置爲window的defaultRouteName，這樣在dart端運行的時候就會根據defaultRouteName來展現對應的Widget了。而上面java層咱們定義了Platform Channel，這樣Flutter端就能夠在dart層經過MethodChannel傳遞消息給java層從而實現兩端的交互。

static final String channelName = "com.flutterbus/demo";

Future<Null> jumpToNativePage() async {
	MethodChannel methodChannel = MethodChannel(channelName);
	await methodChannel.invokeMethod("gotoNativePage");
}
複製代碼

至此，安卓原生工程集成Flutter就完成了，後續咱們想用Flutter實現UI界面均可以在Flutter module工程中編寫，原生想跳轉到指定Flutter頁面設置好routeName便可，dart的main函數會根據routeName來跳轉到不一樣的Widget。項目最終運行的效果以下

iOS集成

原生工程配置

集成Flutter module工程到flutter_host_ios工程須要Cocoapods依賴項管理器，請確保本地安裝了cocoapods，若是未安裝，能夠參考:cocoapods.org/

若是flutter_host_ios工程中已經使用了cocoapods，將下列配置添加到工程的Podfile文件中

flutter_application_path = 'some/path/flutter_module/'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
複製代碼

若是沒有使用cocoapods，則在iOS工程根目錄下建立一個新的Podfile文件，配置以下信息

platform :ios, '9.0'
use_frameworks!

target 'flutter_host_ios' do
  flutter_application_path = 'some/path/flutter_module/'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
end
複製代碼

配置完成後，執行pod install確保Flutter.framework添加到iOS工程中。此時flutter_host_ios工程目錄下的目錄結構

flutter_host_ios/
  flutter_host_ios/
  flutter_host_ios.xcodeproj
  flutter_host_ios.xcworkspace
  Podfile
  Podfile.lock
  Pods/
複製代碼

雙擊iOS工程目錄中的flutter_host_ios.xcworkspace文件會使用xcode打開。

下面進行以下配置

  1. 由於Flutter如今不支持bitcode，須要禁用項目TARGETS的Build Settings-> Build Options-> Enable Bitcode部分中的ENABLE_BITCODE標誌。

  2. 找到項目TARGETS的Build Phases，點擊左上角+號選擇New Run Script Phase添加Run Script，在Shell字段下添加下面兩行腳本

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
複製代碼

添加完成後拖拽Run Script欄到Target Dependencies欄下便可。而後執行快捷鍵⌘B構建一下項目。接下來咱們就能夠在flutter_host_ios項目中添加原生與flutter交互的代碼了。

原生與Flutter交互

首先，咱們將flutter_host_ios中的AppDelegate改成繼承自FlutterAppDelegate，並在頭文件中定義FlutterEngine變量供後續使用

#import <UIKit/UIKit.h>
#import <Flutter/Flutter.h>

@interface AppDelegate : FlutterAppDelegate
@property (nonatomic,strong) FlutterEngine *flutterEngine;
@end
複製代碼

在AppDelegate.m文件中的完成應用啓動的生命週期函數中實現flutterEngine

#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h> // Only if you have Flutter Plugins

#include "AppDelegate.h"

@implementation AppDelegate

// This override can be omitted if you do not have any Flutter Plugins.
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  self.flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
  [self.flutterEngine runWithEntrypoint:nil];
  [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end
複製代碼

接下來咱們在原生界面中添加一個按鈕，按鈕的點擊事件觸發後跳轉到Flutter頁面

#import <Flutter/Flutter.h>
#import "AppDelegate.h"
#import "ViewController.h"

@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    [button addTarget:self
               action:@selector(handleButtonAction)
     forControlEvents:UIControlEventTouchUpInside];
    [button setTitle:@"Press me" forState:UIControlStateNormal];
    [button setBackgroundColor:[UIColor blueColor]];
    button.frame = CGRectMake(80.0, 210.0, 160.0, 40.0);
    [self.view addSubview:button];
}

- (void)handleButtonAction {
    FlutterEngine *flutterEngine = [(AppDelegate *)[[UIApplication sharedApplication] delegate] flutterEngine];
    FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:flutterEngine nibName:nil bundle:nil];
    [self presentViewController:flutterViewController animated:false completion:nil];
}
@end
複製代碼

根據官方說明咱們想在FlutterViewController中顯示first對應的Flutter Widget，那麼須要在flutterViewController下方添加一行指定初始化routeName的代碼

[flutterViewController setInitialRoute:@"first"];
複製代碼

可是運行應用以後，咱們發現點擊按鈕後並無跳轉指定first對應的頁面，而是顯示了Flutter中的一個默認頁面，dart中的switch語句走到了如下分支

default:
      return Center(
        child: Text('Unknown route: $route', textDirection: TextDirection.ltr)
複製代碼

分析源代碼後發如今AppDelegate初始化flutterEngine後，當即調用了[self.flutterEngine runWithEntrypoint:nil]，這句代碼是建立Flutter engine環境並啓動引擎，這時候其實已經執行了main.dart中的main方法，此時window.defaultRouteName爲空，因此展現了上面default分支的Widget，後邊建立FlutterViewController後設置的routeName是起不到做用的。runWithEntrypoint方法對應的源碼參考

- (BOOL)runWithEntrypoint:(NSString*)entrypoint {
  return [self runWithEntrypoint:entrypoint libraryURI:nil];
}

- (BOOL)runWithEntrypoint:(NSString*)entrypoint libraryURI:(NSString*)libraryURI {
  if ([self createShell:entrypoint libraryURI:libraryURI]) {
    [self launchEngine:entrypoint libraryURI:libraryURI];
  }

  return _shell != nullptr;
}

- (BOOL)createShell:(NSString*)entrypoint libraryURI:(NSString*)libraryURI {
   ...
   _shell = shell::Shell::Create(std::move(task_runners),
                                  std::move(settings),
                                  on_create_platform_view,
                                  on_create_rasterizer
                                  );
   ...
   return _shell != nullptr;
}

- (void)launchEngine:(NSString*)entrypoint libraryURI:(NSString*)libraryOrNil {
  self.shell.GetTaskRunners().GetUITaskRunner()->PostTask(fml::MakeCopyable(
      [engine = _shell->GetEngine(),
       config = [_dartProject.get() runConfigurationForEntrypoint:entrypoint
                                                     libraryOrNil:libraryOrNil]  //
  ]() mutable {
        if (engine) {
          // 這裏開始啓動dart應用程序執行main.dart中的main函數
          auto result = engine->Run(std::move(config));
          ...
        }
      }));
}
複製代碼

那麼這個問題怎麼解決呢，咱們可使用FlutterViewController本身建立的FlutterEngine而不去本身建立，這樣在按鈕點擊跳轉事件處理時執行以下代碼

FlutterViewController *flutterViewController = [[FlutterViewController alloc] init];
    [flutterViewController setInitialRoute:@"first"];
    FlutterMethodChannel* methodChannel = [FlutterMethodChannel
                                            methodChannelWithName:@"com.flutterbus/demo"
                                            binaryMessenger:flutterViewController];
    
    [methodChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        if ([@"gotoNativePage" isEqualToString:call.method]) {
            NSLog(@"gotoNativePage received!!!!!!!");
            NativeViewController *nativeViewController = [[NativeViewController alloc] init];
            [flutterViewController presentViewController:nativeViewController animated:NO completion:nil];
            result(@YES);
        } if([@"exit" isEqualToString:call.method]) {
            [flutterViewController dismissViewControllerAnimated:NO completion:nil];
            result(@YES);
        } else {
            result(FlutterMethodNotImplemented);
        }
    }];
    [self presentViewController:flutterViewController animated:NO completion:nil];
複製代碼

以上代碼中咱們同時定義了一個FlutterMethodChannel以供接收Flutter端的消息作處理，這樣就實現了Flutter和原生的交互，項目最終運行後效果以下

總結

以上就是官方提供的混合開發方案了，這個方案有一個巨大的缺點，就是在原生和Flutter頁面疊加跳轉時內存不斷增大，由於FlutterView和FlutterViewController每次跳轉都會新建一個對象，從而Embedder層的AndroidShellHolder和FlutterEngine都會建立新對象，UI Thread、IO Thread、GPU Thread和Shell都建立新的對象，惟獨共享的只有DartVM對象，可是RootIsolate也是獨立的，因此Flutter頁面以前的數據不能共享，這樣就很難將一些全局性的公用數據保存在Flutter中，因此這套方案比較適合開發不帶有共享數據的獨立頁面，可是頁面又不能太多，由於建立的Flutter頁面越多內存就會暴增，尤爲是在iOS上還有內存泄露的問題。

有須要本文中源代碼的同窗能夠給本公衆號發消息留下你的郵箱地址。其實代碼也比較簡單，根據整個步驟的說明基本就能本身搞定了。

說明：

文章轉載自對應的「Flutter編程指南」微信公衆號，更多Flutter相關技術文章打開微信掃描二維碼關注微信公衆號獲取。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程