Flutter混合開發(fā)分析-創(chuàng)新互聯(lián)

本篇內(nèi)容介紹了“Flutter混合開發(fā)分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)與策劃設(shè)計(jì),尖扎網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:尖扎等地區(qū)。尖扎做網(wǎng)站價(jià)格咨詢:028-86922220

混合開發(fā)簡(jiǎn)介

使用Flutter從零開始開發(fā)App是一件輕松愜意的事情，但對(duì)于一些成熟的產(chǎn)品來說，完全摒棄原有App的歷史沉淀，全面轉(zhuǎn)向Flutter是不現(xiàn)實(shí)的。因此使用Flutter去統(tǒng)一Android、iOS技術(shù)棧，把它作為已有原生App的擴(kuò)展能力，通過有序推進(jìn)來提升移動(dòng)終端的開發(fā)效率。

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

在Flutter框架出現(xiàn)早期，由于官方提供的混編方式以及資料有限，國(guó)內(nèi)較早使用Flutter進(jìn)行混合開發(fā)的團(tuán)隊(duì)大多使用的是統(tǒng)一管理模式。但是，隨著業(yè)務(wù)迭代的深入，統(tǒng)一管理模式的弊端也隨之顯露，不僅三端（Android、iOS和Flutter）代碼耦合嚴(yán)重，相關(guān)工具鏈耗時(shí)也隨之大幅增長(zhǎng)，最終導(dǎo)致開發(fā)效率降低。所以，后續(xù)使用Flutter進(jìn)行混合開發(fā)的團(tuán)隊(duì)大多使用三端代碼分離的模式來進(jìn)行依賴治理，最終實(shí)現(xiàn)Flutter工程的輕量級(jí)接入。

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

使用三端分離模式進(jìn)行Flutter混合開發(fā)的關(guān)鍵是抽離Flutter工程，將不同平臺(tái)的構(gòu)建產(chǎn)物依照標(biāo)準(zhǔn)組件化的形式進(jìn)行管理，即Android使用aar、iOS使用pod。也就是說，F(xiàn)lutter的混編方案其實(shí)就是將Flutter模塊打包成aar或者pod庫(kù)，然后在原生工程像引用其他第三方原生組件庫(kù)那樣引入Flutter模塊即可。

Flutter模塊

默認(rèn)情況下，新創(chuàng)建的Flutter工程會(huì)包含F(xiàn)lutter目錄和原生工程的目錄。在這種情況下，原生工程會(huì)依賴Flutter工程的庫(kù)和資源，并且無法脫離Flutter工程獨(dú)立構(gòu)建和運(yùn)行。在混合開發(fā)中，原生工程對(duì)Flutter的依賴主要分為兩部分。一個(gè)是Flutter的庫(kù)和引擎，主要包含F(xiàn)lutter的Framework 庫(kù)和引擎庫(kù)；另一個(gè)是Flutter模塊工程，即Flutter混合開發(fā)中的Flutter功能模塊，主要包括Flutter工程lib目錄下的Dart代碼實(shí)現(xiàn)。對(duì)于原生工程來說，集成Flutter只需要在同級(jí)目錄創(chuàng)建一個(gè)Flutter模塊，然后構(gòu)建iOS和Android各自的Flutter依賴庫(kù)即可。接下來，我們只需要在原生項(xiàng)目的同級(jí)目錄下，執(zhí)行Flutter提供的構(gòu)建模塊命令創(chuàng)建Flutter模塊即可，如下所示。

flutter create -t module flutter_library

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

可以看到，和普通的Flutter工程相比，F(xiàn)lutter模塊工程也內(nèi)嵌了Android工程和iOS工程，只不過默認(rèn)情況下，Android工程和iOS工程是隱藏的。因此，對(duì)于Flutter模塊工程來說，也可以像普通工程一樣使用 Android Studio進(jìn)行開發(fā)和調(diào)試。同時(shí)，相比普通的Flutter工程，F(xiàn)lutter模塊工程的Android工程目錄下多了一個(gè)Flutter目錄，此目錄下的build.gradle配置就是我們構(gòu)建aar時(shí)的打包配置。同樣，在Flutter模塊工程的iOS工程目錄下也會(huì)找到一個(gè)Flutter目錄，這也是Flutter模塊工程既能像Flutter普通工程一樣使用Android Studio進(jìn)行開發(fā)調(diào)試，又能打包構(gòu)建aar或pod的原因。

Android集成Flutter

在原生Android工程中集成Flutter，原生工程對(duì)Flutter的依賴主要包括兩部分，分別是Flutter庫(kù)和引擎，以及Flutter工程構(gòu)建產(chǎn)物。

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

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

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

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

dependencies { implementation project(":flutter")}

然后編譯并運(yùn)行原生Android工程，如果沒有任何錯(cuò)誤則說明集成Flutter模塊成功。需要說明的是，由于Flutter支持的最低版本為16，所以需要將Android項(xiàng)目的minSdkVersion修改為16。如果出現(xiàn)“程序包android.support.annotation不存在”的錯(cuò)誤，需要使用如下的命令來創(chuàng)建Flutter模塊，因?yàn)樾掳姹镜腁ndroid默認(rèn)使用androidx來管理包。

flutter create --androidx -t module flutter_library

對(duì)于Android原生工程，如果還沒有升級(jí)到androidx，可以在原生Android工程上右鍵，然后依次選擇【Refactor】→【Migrate to Androidx】將Android工程升級(jí)到androidx包管理。在原生Android工程中成功添加Flutter模塊依賴后，打開原生Android工程，并在應(yīng)用的入口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頁(yè)面構(gòu)建成Android能夠識(shí)別的視圖，然后將這個(gè)視圖使用Android提供的addContentView()方法添加到父窗口即可。重新運(yùn)行原生Android工程，最終效果如下圖所示。

如果原生Android的MainActivity加載的是一個(gè)FrameLayout，那么加載只需要將Flutter頁(yè)面構(gòu)建成一個(gè)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根目錄下執(zhí)行aar打包構(gòu)建命令即可抽取Flutter依賴，如下所示。

flutter build apk --debug

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

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

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

iOS集成Flutter

原生iOS工程對(duì)Flutter的依賴包含F(xiàn)lutter庫(kù)和引擎，以及Flutter工程編譯產(chǎn)物。其中，F(xiàn)lutter 庫(kù)和引擎指的是Flutter.framework等，F(xiàn)lutter工程編譯產(chǎn)物指的是 App.framework等。在原生iOS工程中集成Flutter需要先配置好CocoaPods，CocoaPods是iOS的類庫(kù)管理工具，用來管理第三方開源庫(kù)。在原生iOS工程中執(zhí)行pod init命令創(chuàng)建一個(gè)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 '

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

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

如果使用的是Flutter早期的版本，還需要添加build phase來支持構(gòu)建Dart代碼。依次選擇【TAGGETS】→【Build Settings】→【Enable Phases】，然后點(diǎn)擊左上角的加號(hào)新建一個(gè)“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已經(jīng)不需要再添加腳本了。重新運(yùn)行原生iOS工程，如果沒有任何錯(cuò)誤則說明iOS成功集成Flutter模塊。

除了使用Flutter模塊方式外，還可以將Flutter模塊打包成可以依賴的動(dòng)態(tài)庫(kù)，然后再使用CocoaPods添加動(dòng)態(tài)庫(kù)。首先，在flutter_library根目錄下執(zhí)行打包構(gòu)建命令生成framework動(dòng)態(tài)庫(kù)，如下所示。

flutter build ios --debug

上面命令是將Flutter工程編譯成Flutter.framework和App.framework動(dòng)態(tài)庫(kù)。如果要生成release版本，只需要把命令中的debug換成release即可。

然后，在原生iOS工程的根目錄下創(chuàng)建一個(gè)名為FlutterEngine的目錄，并把生成的兩個(gè)framework動(dòng)態(tài)庫(kù)文件拷貝進(jìn)去。不過，iOS生成模塊化產(chǎn)物要比Android多一個(gè)步驟，因?yàn)樾枰袴lutter工程編譯生成的庫(kù)手動(dòng)封裝成一個(gè)pod。首先，在flutter_ library該目錄下創(chuàng)建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

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

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

重新執(zhí)行pod install命令安裝依賴庫(kù)，原生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

在上面的代碼中，我們?cè)谠鷌OS中創(chuàng)建了一個(gè)按鈕，點(diǎn)擊按鈕時(shí)就會(huì)跳轉(zhuǎn)到Flutter頁(yè)面，最終效果如下圖所示。

默認(rèn)情況下，F(xiàn)lutter為提供了兩種調(diào)用方式，分別是FlutterViewController和FlutterEngine。對(duì)于FlutterViewController來說，打開ViewController.m文件，在里面添加一個(gè)加載flutter頁(yè)面的方法并且添加一個(gè)按鈕看來調(diào)用。

Flutter模塊調(diào)試

眾所周知，F(xiàn)lutter的優(yōu)勢(shì)之一就是在開發(fā)過程中使用熱重載功能來實(shí)現(xiàn)快速調(diào)試。默認(rèn)情況下，在原生工程中集成Flutter模塊后熱重載功能是失效的，需要重新運(yùn)行原生工程才能看到效果。如此一來，F(xiàn)lutter開發(fā)的熱重載優(yōu)勢(shì)就失去了，并且開發(fā)效率也隨之降低。

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

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

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

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

“Flutter混合開發(fā)分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

網(wǎng)頁(yè)題目：Flutter混合開發(fā)分析-創(chuàng)新互聯(lián)
文章鏈接：http://muchs.cn/article32/dhgcsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站改版、網(wǎng)站維護(hù)、標(biāo)簽優(yōu)化、域名注冊(cè)、營(yíng)銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容