Hi, 各位看官, 里邊請! ??
最近在搞Flutter, 來跟各位隨便嘮嘮! 今天我們不說語法, 也不說 widget 哈! 有興趣的小伙伴可以點擊鏈接去查看Flutter相關內容!
今天跟看官們說說, Flutter 與 iOS交互的那些事! 由于我的本沒有安裝 Android Studio, 則用VS Code來說, 本期主要圍繞著 Xcode 來講!
關于安卓其結構都一樣, 后期會推出!
在iOS 原有的項目中集成Flutter
原有的項目我就不做展示了哈, 我用一個Demo 來演示! 其效果是一樣
-
首先打開終端, 輸入 flutter create --template module my_flutter, 創建 module, 命名為my_flutter
然后打開module, ( Tip: 在集成進 Xcode之前, model 最好先運行起來)
- 我相信身為iOS開發者對CocoaPods都不陌生吧, 本期將通過CocoaPods管理, 把剛剛創建的 Flutter module 集成到項目中
1.打開 Podfile 文件, 在其中添加 module 本地路徑:
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
# 添加模塊所在路徑
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
target 'useFlutter' do
# Comment the next line if you don't want to use dynamic frameworks
use_frameworks!
# 安裝Flutter模塊
install_all_flutter_pods(flutter_application_path)
end
- 添加完成后,保存退出! 然后 pod install
3.打開Xcode項目, 在AppDelegate中創建引擎
class AppDelegate: UIResponder, UIApplicationDelegate {
// 1. 創建 flutterEngine name: 引擎名稱
lazy var flutterEngine = FlutterEngine(name: "Evan_Engine")
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
// 2.啟動引擎
flutterEngine.run()
return true
}
}
4.來到 ViewController中來使用 Flutter module
// 該函數為Button點擊事件
@IBAction func flutterPush(_ sender: Any) {
// 3. 創建FlutterViewController對象（需要先獲取flutterEngine）
let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine;
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil);
flutterViewController.modalPresentationStyle = .fullScreen
self.present(flutterViewController, animated: true, completion: nil)
}
我們也可以省略預先創建的 FlutterEngine ：
但不推薦這樣來做，因為在第一針圖像渲染完成之前，可能會出現明顯的延遲。
@IBAction func flutterPush(_ sender: Any) {
let flutterViewController = FlutterViewController(project: nil, nibName: nil, bundle: nil)
present(flutterViewController, animated: true, completion: nil)
}
-
把項目運行起來, 點擊Button, 來看看效果
哈哈, 是不是感覺好簡單!
Tip: 不要把 widget 作為 view 來與原生的同一個頁面上混用, 可能會有不可預知行為! 切記切記
-
雖說是用Xcode在運行, 但我們還是可以繼續來使用 Hot Reload
-
打開 module, 在終端執行 flutter attach, 鏈接成功后, 如下圖
2.此時我們就可以去修改代碼, 將 Text 字體顏色改為red, 修改完后先保存, 然后在VS Code 終端中輸入 r, 則執行了Hot reload, 此時屏幕也隨之發生了改變, 大功告成! ??
注意: 目前一些場景依然是有限制的:
- 運行多個Flutter實例，或在屏幕局部上運行Flutter可能會導致不可以預測的行為；
- 在后臺模式使用Flutter的能力還在開發中（目前不支持）；
- 將Flutter庫打包到另一個可共享的庫或將多個Flutter庫打包到同一個應用中，都不支持；
- 添加到應用在Android平臺的實現基于 FlutterPlugin 的 API，一些不支持FlutterPlugin 的插件可能會有不可預知的行為。
Flutter 與 iOS 交互
- 打開Flutter 項目, 創建 StatefulWidget,
- 創建通信對象 MethodChannel
- 調用原生的函數 getOriginalContent
class MyInteractionBody extends StatefulWidget {
@override
_MyInteractionBodyState createState() => _MyInteractionBodyState();
}
class _MyInteractionBodyState extends State<MyInteractionBody> {
// 1.創建通信對象 MethodChannel
static const platForm = MethodChannel('Evan_channel');
var _content = '文案';
@override
Widget build(BuildContext context) {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_content),
SizedBox(height: 10,),
TextButton(
child: Text('調用原生函數'),
onPressed: getContent)
],
),
);
}
void getContent() async {
// 2. 調用原生的函數 getOriginalContent, 等待回調
final result = await platForm.invokeMethod('getOriginalContent');
setState(() {
_content = result;
});
}
}
- 使用Xcode打開Flutter 中 ios文件中的項目, 在需要處添加以下代碼
// 1.獲取 FlutterViewController
if let controller: FlutterViewController = window.rootViewController as? FlutterViewController {
// 2. FlutterMethodChannel
let channel = FlutterMethodChannel(name: "Evan_channel", binaryMessenger: controller.binaryMessenger)
// 3.監聽 channel 調用方法
channel.setMethodCallHandler { (call: FlutterMethodCall, result: @escaping FlutterResult) in
// 函數名稱
if call.method == "getOriginalContent" {
// 如果沒有獲取到,那么返回給Flutter端一個異常
// result(FlutterError(code: "0", message: "錯誤", details: nil))
// 通過result將結果回調給Flutter端
result(self.getOriginalContent())
} else {
// 未找到
result(FlutterMethodNotImplemented)
}
}
}
func getOriginalContent() -> String { "已經與原生成功交互" }
到此交互就可以使用了!
好了, Flutter 與 Xcode 交互這點事, 大體上也都跟各位看官嘮完了, 以上只是一些基本簡單用法, 更多的技能還需要用各位去探索, 研究哦!
