Flutter混合開發分析

本篇內容介紹了“Flutter混合開發分析”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

混合開發簡介

使用Flutter從零開始開發App是一件輕松愜意的事情，但對于一些成熟的產品來說，完全摒棄原有App的歷史沉淀，全面轉向Flutter是不現實的。因此使用Flutter去統一Android、iOS技術棧，把它作為已有原生App的擴展能力，通過有序推進來提升移動終端的開發效率。

目前，想要在已有的原生App里嵌入一些Flutter頁面主要有兩種方案。一種是將原生工程作為Flutter工程的子工程，由Flutter進行統一管理，這種模式稱為統一管理模式。另一種是將Flutter工程作為原生工程的子模塊，維持原有的原生工程管理方式不變，這種模式被稱為三端分離模式。

在Flutter框架出現早期，由于官方提供的混編方式以及資料有限，國內較早使用Flutter進行混合開發的團隊大多使用的是統一管理模式。但是，隨著業務迭代的深入，統一管理模式的弊端也隨之顯露，不僅三端（Android、iOS和Flutter）代碼耦合嚴重，相關工具鏈耗時也隨之大幅增長，最終導致開發效率降低。所以，后續使用Flutter進行混合開發的團隊大多使用三端代碼分離的模式來進行依賴治理，最終實現Flutter工程的輕量級接入。

除了可以輕量級接入外，三端代碼分離模式還可以把Flutter模塊作為原生工程的子模塊，從而快速地接入Flutter模塊，降低原生工程的改造成本。在完成對Flutter模塊的接入后，Flutter工程可以使用Android Studio進行開發，無需再打開原生工程就可以對Dart代碼和原生代碼進行開發調試。

使用三端分離模式進行Flutter混合開發的關鍵是抽離Flutter工程，將不同平臺的構建產物依照標準組件化的形式進行管理，即Android使用aar、iOS使用pod。也就是說，Flutter的混編方案其實就是將Flutter模塊打包成aar或者pod庫，然后在原生工程像引用其他第三方原生組件庫那樣引入Flutter模塊即可。

Flutter模塊

默認情況下，新創建的Flutter工程會包含Flutter目錄和原生工程的目錄。在這種情況下，原生工程會依賴Flutter工程的庫和資源，并且無法脫離Flutter工程獨立構建和運行。在混合開發中，原生工程對Flutter的依賴主要分為兩部分。一個是Flutter的庫和引擎，主要包含Flutter的Framework 庫和引擎庫；另一個是Flutter模塊工程，即Flutter混合開發中的Flutter功能模塊，主要包括Flutter工程lib目錄下的Dart代碼實現。對于原生工程來說，集成Flutter只需要在同級目錄創建一個Flutter模塊，然后構建iOS和Android各自的Flutter依賴庫即可。接下來，我們只需要在原生項目的同級目錄下，執行Flutter提供的構建模塊命令創建Flutter模塊即可，如下所示。

flutter create -t module flutter_library

其中，flutter_library為Flutter模塊名。執行上面的命令后，會在原生工程的同級目錄下生成一個flutter_library模塊工程。Flutter模塊也是Flutter工程，使用Android Studio打開它，其目錄如下圖所示。

可以看到，和普通的Flutter工程相比，Flutter模塊工程也內嵌了Android工程和iOS工程，只不過默認情況下，Android工程和iOS工程是隱藏的。因此，對于Flutter模塊工程來說，也可以像普通工程一樣使用 Android Studio進行開發和調試。同時，相比普通的Flutter工程，Flutter模塊工程的Android工程目錄下多了一個Flutter目錄，此目錄下的build.gradle配置就是我們構建aar時的打包配置。同樣，在Flutter模塊工程的iOS工程目錄下也會找到一個Flutter目錄，這也是Flutter模塊工程既能像Flutter普通工程一樣使用Android Studio進行開發調試，又能打包構建aar或pod的原因。

Android集成Flutter

在原生Android工程中集成Flutter，原生工程對Flutter的依賴主要包括兩部分，分別是Flutter庫和引擎，以及Flutter工程構建產物。

Flutter庫和引擎：包含icudtl.dat、libFlutter.so以及一些class文件，最終這些文件都會被封裝到Flutter.jar中。Flutter工程產物：包括應用程序數據段 isolate_snapshot_data、應用程序指令段 isolate_snapshot_instr、虛擬機數據段vm_snapshot_data、虛擬機指令段vm_snapshot_instr以及資源文件flutter_assets。

和原生Android工程集成其他插件庫的方式一樣，在原生Android工程中引入Flutter模塊需要先在settings.gradle中添加如下代碼。

setBinding(new Binding([gradle: this]))evaluate(new File( settingsDir.parentFile, 'flutter_library/.android/include_flutter.groovy'))

其中，flutter_library為我們創建的Flutter模塊。然后，在原生Android工程的app目錄的build.gradle文件中添加如下依賴。

dependencies {  implementation project(":flutter")}

然后編譯并運行原生Android工程，如果沒有任何錯誤則說明集成Flutter模塊成功。需要說明的是，由于Flutter支持的最低版本為16，所以需要將Android項目的minSdkVersion修改為16。如果出現“程序包android.support.annotation不存在”的錯誤，需要使用如下的命令來創建Flutter模塊，因為最新版本的Android默認使用androidx來管理包。

flutter create --androidx -t module flutter_library

對于Android原生工程，如果還沒有升級到androidx，可以在原生Android工程上右鍵，然后依次選擇【Refactor】→【Migrate to Androidx】將Android工程升級到androidx包管理。在原生Android工程中成功添加Flutter模塊依賴后，打開原生Android工程，并在應用的入口MainActivity文件中添加如下代碼。

public class MainActivity extends AppCompatActivity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    View flutterView = Flutter.createView(this, getLifecycle(), "route1");    FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);    addContentView(flutterView, layoutParams);  }}

通過Flutter提供的createView()方法，可以將Flutter頁面構建成Android能夠識別的視圖，然后將這個視圖使用Android提供的addContentView()方法添加到父窗口即可。重新運行原生Android工程，最終效果如下圖所示。

如果原生Android的MainActivity加載的是一個FrameLayout，那么加載只需要將Flutter頁面構建成一個Fragment即可，如下所示。

public class MainActivity extends AppCompatActivity {  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    FragmentTransaction ft= getSupportFragmentManager().beginTransaction();    ft.replace(R.id.fragment_container, Flutter.createFragment("Hello Flutter"));    ft.commit();  }}

除了使用Flutter模塊方式集成外，還可以將Flutter模塊打包成aar，然后再添加依賴。在flutter_library根目錄下執行aar打包構建命令即可抽取Flutter依賴，如下所示。

flutter build apk --debug

此命令的作用是將Flutter庫和引擎以及工程產物編譯成一個aar包，上面命令編譯的aar包是debug版本，如果需要構建release版本，只需要把命令中的debug換成release即可。打包構建的flutter-debug.aar位于.android/Flutter/build/outputs/aar/目錄下，可以把它拷貝到原生Android工程的app/libs目錄下，然后在原生Android工程的app目錄的打包配置build.gradle中添加對它的依賴，如下所示。

dependencies { implementation(name: 'flutter-debug', ext: 'aar')}

然后重新編譯一下項目，如果沒有任何錯誤提示則說明Flutter模塊被成功集成到Android原生工程中。

iOS集成Flutter

原生iOS工程對Flutter的依賴包含Flutter庫和引擎，以及Flutter工程編譯產物。其中，Flutter 庫和引擎指的是Flutter.framework等，Flutter工程編譯產物指的是 App.framework等。在原生iOS工程中集成Flutter需要先配置好CocoaPods，CocoaPods是iOS的類庫管理工具，用來管理第三方開源庫。在原生iOS工程中執行pod init命令創建一個Podfile文件，然后在Podfile文件中添加Flutter模塊依賴，如下所示。

flutter_application_path = '../flutter_ library/load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')target 'iOSDemo' do # Comment the next line if you don't want to use dynamic frameworks use_frameworks! install_all_flutter_pods(flutter_application_path) # Pods for iOSDemo … //省略其他腳本end '

然后，關閉原生iOS工程，并在原生iOS工程的根目錄執行pod install命令安裝所需的依賴包。安裝完成后，使用Xcode打開iOSDemo.xcworkspace原生工程。

默認情況下，Flutter是不支持Bitcode的，Bitcode是一種iOS編譯程序的中間代碼，在原生iOS工程中集成Flutter需要禁用Bitcode。在Xcode中依次選擇【TAGETS】→【Build Setttings】→【Build Options】→【Enable Bitcode】來禁用Bitcode，如下圖所示。

如果使用的是Flutter早期的版本，還需要添加build phase來支持構建Dart代碼。依次選擇【TAGGETS】→【Build Settings】→【Enable Phases】，然后點擊左上角的加號新建一個“New Run Script Phase”，添加如下腳本代碼。

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed

不過，最新版本的Flutter已經不需要再添加腳本了。重新運行原生iOS工程，如果沒有任何錯誤則說明iOS成功集成Flutter模塊。

除了使用Flutter模塊方式外，還可以將Flutter模塊打包成可以依賴的動態庫，然后再使用CocoaPods添加動態庫。首先，在flutter_library根目錄下執行打包構建命令生成framework動態庫，如下所示。

flutter build ios --debug

上面命令是將Flutter工程編譯成Flutter.framework和App.framework動態庫。如果要生成release版本，只需要把命令中的debug換成release即可。

然后，在原生iOS工程的根目錄下創建一個名為FlutterEngine的目錄，并把生成的兩個framework動態庫文件拷貝進去。不過，iOS生成模塊化產物要比Android多一個步驟，因為需要把Flutter工程編譯生成的庫手動封裝成一個pod。首先，在flutter_ library該目錄下創建FlutterEngine.podspec，然后添加如下腳本代碼。

Pod::Spec.new do |s| s.name       = 'FlutterEngine' s.version     = '0.1.0' s.summary     = 'FlutterEngine' s.description   = <<-DESCTODO: Add long description of the pod here.            DESC s.homepage     = 'https://github.com/xx/FlutterEngine' s.license     = { :type => 'MIT', :file => 'LICENSE' } s.author      = { 'xzh' => '1044817967@qq.com' } s.source    = { :git => "", :tag => "#{s.version}" } s.ios.deployment_target = '9.0' s.ios.vendored_frameworks = 'App.framework', 'Flutter.framework'end

然后，執行pod lib lint命令即可拉取Flutter模塊所需的組件。接下來，在原生iOS工程的Podfile文件添加生成的庫即可。

target 'iOSDemo' do  pod 'FlutterEngine', :path => './'end

重新執行pod install命令安裝依賴庫，原生iOS工程集成Flutter模塊就完成了。接下來，使用Xcode打開ViewController.m文件，然后添加如下代碼。

#import "ViewController.h"#import <Flutter/Flutter.h>#import <FlutterPluginRegistrant/GeneratedPluginRegistrant.h>@interface ViewController ()@end@implementation ViewController- (void)viewDidLoad {  [super viewDidLoad];  UIButton *button = [[UIButton alloc]init];  [button setTitle:@"加載Flutter模塊" forState:UIControlStateNormal];  button.backgroundColor=[UIColor redColor];  button.frame = CGRectMake(50, 50, 200, 100);  [button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];  [button addTarget:self action:@selector(buttonPrint) forControlEvents:UIControlEventTouchUpInside];  [self.view addSubview:button];}- (void)buttonPrint{  FlutterViewController * flutterVC = [[FlutterViewController alloc]init];  [flutterVC setInitialRoute:@"defaultRoute"];  [self presentViewController:flutterVC animated:true completion:nil];}@end

在上面的代碼中，我們在原生iOS中創建了一個按鈕，點擊按鈕時就會跳轉到Flutter頁面，最終效果如下圖所示。

默認情況下，Flutter為提供了兩種調用方式，分別是FlutterViewController和FlutterEngine。對于FlutterViewController來說，打開ViewController.m文件，在里面添加一個加載flutter頁面的方法并且添加一個按鈕看來調用。

Flutter模塊調試

眾所周知，Flutter的優勢之一就是在開發過程中使用熱重載功能來實現快速調試。默認情況下，在原生工程中集成Flutter模塊后熱重載功能是失效的，需要重新運行原生工程才能看到效果。如此一來，Flutter開發的熱重載優勢就失去了，并且開發效率也隨之降低。

那么，能不能在混合項目中開啟Flutter的熱重載呢？答案是可以的，只需要經過如下步驟即可開啟熱重載功能。首先，關閉原生應用，此處所說的關閉是指關閉應用的進程，而不是簡單的退出應用。在Flutter模塊的根目錄中輸入flutter attach命令，然后再次打開原生應用，就會看到連接成功的提示，如下圖所示。

如果同時連接了多臺設備，可以使用flutter attach -d 命令來指定連接的設備。接下來，只需要按r鍵即可執行熱重載，按R鍵即可執行熱重啟，按d鍵即可斷開連接。

在Flutter工程中，我們可以直接點擊debug按鈕來進行代碼調試，但在混合項目中，直接點擊debug按鈕是不起作用的。此時，可以使用Android Studio提供的flutter attach按鈕來建立與flutter模塊的連接，進行實現對flutter模塊的代碼調試，如圖下圖所示。

上面只是完成了在原生工程中引入Flutter模塊，具體開發時還會遇到與Flutter模塊的通信問題、路由管理問題，以及打包等。

“Flutter混合開發分析”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！