全视传媒 發表於 2023-3-29 15:13:43

iOS 项目嵌入Flutter 运行(最新推荐)

<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>一&nbsp;&nbsp;创建Flutter&nbsp;模块</li><li>二&nbsp;嵌入到iOS&nbsp;项目</li><li>三&nbsp;&nbsp;iOS&nbsp;项目中调用</li></ul></div><p class="maodian"></p><h2>一&nbsp;&nbsp;创建Flutter&nbsp;模块</h2>
<p>命令行</p>
<div class="jb51code"><pre class="brush:bash;">flutter create --template module my_flutter</pre></div>
<p>创建完成后,该模块和普通的Flutter项目一直,可以通过Android Studio或VSCode打开、开发、运行;</p>
<ul><li>和之前项目不同的iOS和Android项目是一个隐藏文件,并且我们通常不会单独打开它们再来运行;</li><li>它们的作用是将Flutter Module进行编译,之后继承到现有的项目中</li></ul>
<div class="jb51code"><pre class="brush:plain;">my_flutter/
├── .ios/
├── .android/
├── lib/
│   └── main.dart
├── test/
└── pubspec.yaml</pre></div>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/20230329145818110.png" /></p>
<p class="maodian"></p><h2>二&nbsp;嵌入到iOS&nbsp;项目</h2>
<p>主要是通过pod&nbsp;进行设置,之后pod&nbsp;install</p>
<p>注意my_flutter&nbsp;的路径对不对</p>
<div class="jb51code"><pre class="brush:plain;">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</pre></div>
<p class="maodian"></p><h2>三&nbsp;&nbsp;iOS&nbsp;项目中调用</h2>
<p>为了在既有的iOS应用中展示Flutter页面,需要启动 Flutter Engine和 FlutterViewController</p>
<p>AppDelegate&nbsp;中设置代码</p>
<div class="jb51code"><pre class="brush:java;">import UIKit
import FlutterPluginRegistrant
@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    // 1.创建一个FlutterEngine对象
    lazy var flutterEngine = FlutterEngine(name:"my flutter engine")

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: ?) -&gt; Bool {
      // Override point for customization after application launch.
      // 2 启动
      flutterEngine.run()
      
      return true
    }</pre></div>
<p>在ViewControlelr&nbsp;设置的代码</p>
<div class="jb51code"><pre class="brush:java;">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)
      
      
    }

}</pre></div>
<p>显示的结果&nbsp;&nbsp;顺利加载出flutter&nbsp;的页面</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202303/20230329145818111.jpg" /></p>
<p>到此这篇关于iOS 项目嵌入Flutter 运行的文章就介绍到这了,更多相关iOS 项目嵌入Flutter内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区!</p>
                           
                            <div class="art_xg">
                              <b>您可能感兴趣的文章:</b><ul><li>ios开发Flutter构建todo list应用</li><li>Flutter Module添加到iOS项目示例详解</li><li>Flutter&nbsp;iOS开发OC混编Swift动态库和静态库问题填坑</li><li>ios开发Flutter之数据存储</li><li>Flutter项目在 iOS14 启动崩溃的解决方法</li><li>Flutter集成到已有iOS工程的方法步骤</li><li>Flutter调用Android和iOS原生代码的方法示例</li></ul>
                            </div>

                        </div>
                        <!--endmain-->
頁: [1]
查看完整版本: iOS 项目嵌入Flutter 运行(最新推荐)