iOS原生項目引入Flutter

在你安裝好Flutter的前提下(在macOS上搭建Flutter開發環境https://flutterchina.club/setup-macos/),為原項目添加flutter 模塊,
比如我的項目是在,/Users/haoran1/Desktop/項目/VideoListApp
在終端執行,

$ cd /Users/haoran1/Desktop/項目/VideoListApp
$ flutter create -t module my_flutter

這將創建一個名稱為my_flutter 模塊文件。

創建完成之后在項目同級目錄下會多出一個文件,其中包含一些Dart代碼以啟動,以及一個.ios / hidden子文件夾,它包含了包含一些Cocoapods和一個幫助程序Ruby腳本的模塊項目。

會是這樣子:
9FCB7A87-3DDD-4A05-9231-50D184A35A61.png

然后在Podfile文件里面添加如下兩行代碼:
flutter_application_path:flutter模塊的路徑

  flutter_application_path = '/Users/haoran1/Desktop/項目/VideoListApp/my_flutter'
  eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)

執行 pod install ,

然后添加New Run Script Phase,

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
24AE4D1C-6C7B-4F1C-B805-8E1DD32401C7.png

然后去AppDelegate.h 里面,#import <Flutter/Flutter.h>,讓AppDelegate繼承于FlutterAppDelegate,在m文件里面,修改didFinishLaunchingWithOptions,添加 [GeneratedPluginRegistrant registerWithRegistry:self];

F5253488-DC5A-47A1-BB83-B4DD5A58C623.png

現在已經可以 跳轉Flutter 界面啦,


1ECA27A5-E2E4-478E-B9E4-11C7951FB648.png

flutter支持熱重載,修改代碼后能立馬看到效果。
終端執行

$ cd /Users/haoran1/Desktop/項目/VideoListApp/my_flutter
$ flutter attach
F6EB98DF-E576-4312-8DD6-3A5352234129.png

看到正在等待模擬器啟動,監聽flutter,然后使用Xcode 啟動原生項目,跳轉flutter界面,

原生界面:


image.png

點擊按鈕跳轉flutter頁面:


image.png

可以看到 已經跳轉成功了,終端監聽到flutter頁面,


image.png

flutter帶有熱重載功能,修改代碼,不重新運行可以直接看到修改后的界面,可以按r來刷新界面,在main.dart內添加一行文字:(main.dart文件在my_flutter/lib里面,使用VSCode或者Android studio打開,如果想要語法聯想需要安裝Flutter插件)


image.png

在終端輸入r后,界面已經變了:
image.png

在跳轉flutter頁面時,可以通過設置 InitialRoute來展示不通的widget。


image.png

在main.dart內,通過routename進行判斷,


image.png

一個月前接觸到flutter,然后使用flutter一邊學習一邊重寫了之前的公司小項目,感覺開發是真的好快,感覺比之前開發時間提快好多,并且是iOS/Android雙平臺的,頁面流暢度也堪比原生(release),畢竟是google爸爸出的,閑魚有多個頁面已經使用flutter。個人感覺比RN入門快,RN基于js橋接,Flutter是自繪UI,真正的一套代碼運行雙端,另外flutter還可以開發桌面應用(https://github.com/google/flutter-desktop-embedding)(https://feather-apps.com/),另外google新的操作系統Fuchsia也可以使用flutter開發。

這是小項目的下載地址,可以下載體驗一下(安卓版):pgyer.com/mBHn

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。