iOS項(xiàng)目嵌入Flutter運(yùn)行的方法是什么

今天小編給大家分享一下iOS項(xiàng)目嵌入Flutter運(yùn)行的方法是什么的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

一  創(chuàng)建Flutter 模塊

命令行

flutter create --template module my_flutter

創(chuàng)建完成后，該模塊和普通的Flutter項(xiàng)目一直，可以通過Android Studio或VSCode打開、開發(fā)、運(yùn)行；

• 和之前項(xiàng)目不同的iOS和Android項(xiàng)目是一個(gè)隱藏文件，并且我們通常不會(huì)單獨(dú)打開它們?cè)賮?lái)運(yùn)行；

• 它們的作用是將Flutter Module進(jìn)行編譯，之后繼承到現(xiàn)有的項(xiàng)目中

my_flutter/
├── .ios/
├── .android/
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml

二 嵌入到iOS 項(xiàng)目

主要是通過pod 進(jìn)行設(shè)置，之后pod install

注意my_flutter 的路徑對(duì)不對(duì)

platform :ios, '12.0'
# 添加模塊所在路徑
flutter_application_path = '../my_flutter'
load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
 
target 'FlutterHybridDemo' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!
  
  # 安裝Flutter模塊
  install_all_flutter_pods(flutter_application_path)
  
  # Pods for FlutterHybridDemo
end
post_install do |installer|
  flutter_post_install(installer) if defined?(flutter_post_install)
end

三  iOS 項(xiàng)目中調(diào)用

為了在既有的iOS應(yīng)用中展示Flutter頁(yè)面，需要啟動(dòng) Flutter Engine和 FlutterViewController

AppDelegate 中設(shè)置代碼

import UIKit
import FlutterPluginRegistrant
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
 
    // 1.創(chuàng)建一個(gè)FlutterEngine對(duì)象
    lazy var flutterEngine = FlutterEngine(name:"my flutter engine")
 
    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // 2 啟動(dòng)
        flutterEngine.run()
        
        return true
    }

在ViewControlelr 設(shè)置的代碼

import UIKit
import Flutter
class ViewController: UIViewController {
 
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        let btn = UIButton(type: UIButton.ButtonType.custom)
        btn.setTitle("加載flutter", for: UIControl.State.normal)
        btn.frame = CGRect(x: 50, y: 50, width: 200, height: 50)
        btn.backgroundColor = UIColor.blue
        btn.addTarget(self, action: #selector(showFlutter), for: UIControl.Event.touchUpInside)
        view.addSubview(btn)
    }
    
    @objc func showFlutter(){
        
        let flutterEngine = (UIApplication.shared.delegate as! AppDelegate).flutterEngine
        
        let flutterController = FlutterViewController(engine:flutterEngine, nibName: nil, bundle: nil)
        
        present(flutterController, animated: true)
        
        
    }
 
}

顯示的結(jié)果  順利加載出flutter 的頁(yè)面

以上就是“iOS項(xiàng)目嵌入Flutter運(yùn)行的方法是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。