ToB企服应用市场:ToB评测及商务社交产业平台

标题: iOS混编Flutter，接入详细步调，attach连接以及debug断点调试 [打印本页]

---

作者: 涛声依旧在    时间: 2024-7-19 05:47
标题: iOS混编Flutter，接入详细步调，attach连接以及debug断点调试
这两年 Flutter 技术热度持续提高，整个 Flutter 生态和社区也发生了翻天覆地的变革，主要体现在：

• Flutter 稳固版发布到了3.0，现在已经支持移动端、Web端和PC端，通过Flutter 开发的应用程序能够轻松的在各个平台迁移并获得很好的性能。
  
• Flutter 在 Github Star 数上排名已经进入了前20，在跨端框架中已经成为稳稳的第一。
  
• 环球很多公司都已经在贸易项目中使用 Flutter，比如Google、微软、阿里、字节、百度、京东等，已经有很多乐成案例。
  
• Flutter 第三方库数量持续保持高速增长，有越来越多的人为Flutter生态贡献代码。Flutter 相关的教程、书籍数量也在高速增长。
  

综上，可以看见Flutter 技术从第一个测试版发布到现在短短 3 年多时间获得了巨大的乐成。而之以是能获得乐成的主要缘故起因是：Flutter 既能保证很高的开发服从，又能获得丝滑的性能。根据近几年实践统计，Flutter 相比原生开发，人效能提高近一倍，而性能可以接近原生。
一、环境搭建 

可参考这个链接：
1.3 搭建Flutter开发环境 | 《Flutter实战·第二版》
二、集成方式

官方说有两种集成方式，分别是：

• 使用CocoaPods依靠性管理器和已安装的Flutter SDK（官方保举）。
  
• 为Flutter引擎，已编译的Dart代码和全部Flutter插件创建Framework。手动嵌入Framework，并在Xcode中更新现有应用程序的构建设置
  

这两种我都使用过目前看照旧cocopods这种方式更合理，下面我就详细记录一下：
将Flutter模块接入iOS老工程是一个涉及多个步调的过程，主要可以通过CocoaPods来管理和集成。以下是一个详细的步调指南，资助你完成这一过程：
三、准备工作

• 安装Flutter SDK：
  
  
  
  • 确保你的开发环境中已经安装了Flutter SDK。你可以从Flutter官网下载并安装得当你操纵系统的SDK版本。
    
  • 安装完成后，通过下令行工具验证Flutter是否正确安装。
    
  
  
• 创建Flutter模块：
  
  
  
  • 在你的iOS项目同级目录下，使用Flutter下令行工具创建一个新的Flutter模块。下令如下：
    1. [/code] bash复制代码
    2.      [table][tr][td][/td][td]flutter create --template module flutter_module[/td][/tr][/table]
    3. [*]这里flutter_module是Flutter模块的名称，你可以根据需要自界说。
    4. [/list]
    5. [*][b]配置CocoaPods[/b]：
    6. [list]
    7. [*]确保你的iOS项目已经配置了CocoaPods，并且能够正常使用。
    8. [/list]
    9. [/list] [size=3]四、集成Flutter模块[/size]
    11. [list=1]
    12. [*][b]添加Flutter模块依靠[/b]：
    13. [list]
    14. [*]在你的iOS项目的Podfile文件中，添加Flutter模块的依靠。这通常涉及到添加Flutter SDK的路径和Flutter模块的路径。例如： [code]

    复制代码
    ruby复制代码
         

    	flutter_application_path = '../flutter_module'
    	load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')
    	target 'YourTargetName' do
    	# 引入Flutter模块
    	install_all_flutter_pods(flutter_application_path)
    	# 其他pod依靠...
    	end

    
    
  • 确保Podfile文件配置正确后，运行pod install下令来安装依靠。
    
  
  
• 配置iOS项目：
  
  
  
  • 在你的iOS项目中，可能需要配置一些须要的设置，以便能够正确加载和运行Flutter模块。这包括在项目的配置文件中添加Flutter的框架搜索路径、库文件路径等。
    
  
  
• 创建FlutterViewController：
  
  
  
  • 在你的iOS项目中，创建一个继承自FlutterViewController的类。这个类将作为Flutter页面的容器，负责加载和显示Flutter页面。
    
  • 你可以在需要的地方实例化这个类，并将其添加到UI视图中。
    
  • 1. - (void)gotoFlutter {
    2.     // 创建并初始化FlutterEngine
    3.     self.flutterEngine = [[FlutterEngine alloc] initWithName:@"MyFlutterEngine" project:nil];
    4.     self.flutterEngine = [[FlutterEngine alloc] initWithName:@"MyFlutterEngine" project:nil];
    5.     [self.flutterEngine runWithEntrypoint:nil];
    6.     [GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
    7.     // 检查flutterEngine是否成功初始化
    8.     if (self.flutterEngine == nil) {
    9.         NSLog(@"Failed to create FlutterEngine");
    10.         return;
    11.     }
    12.     // 创建FlutterViewController并设置其FlutterEngine
    13.     FlutterViewController *flutterViewController =[[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
    14.     // 设置初始路由为测试页面（取消注释）
    15.     [flutterViewController setInitialRoute:@"/test"];
    16.     // 呈现FlutterViewController
    17.     [self presentViewController:flutterViewController animated:YES completion:nil];
    18.     NSLog(@"FlutterViewController presented");
    19. }

    复制代码
    
    
  
  
• 调用Flutter页面：
  
  
  
  • 当你的iOS应用需要加载Flutter页面时，通过实例化FlutterViewController并设置其initialRoute属性来指定要加载的Flutter页面。然后，将这个FlutterViewController添加到你的UI视图中，从而显示Flutter页面。
    
  
  

五、处理原生代码与Flutter代码的交互

• 使用MethodChannel：
  
  
  
  • MethodChannel是Flutter中用于原生代码和Dart代码之间通信的一种机制。
    
  • 你可以通过界说一个MethodChannel的实例，并在原生代码和Dart代码中分别实现相应的方法来处理通信。
    
  
  
• 处理数据通报：
  
  
  
  • 通过MethodChannel，你可以实现数据的双向通报。在iOS原生代码中发送数据给Flutter Dart代码，或在Dart代码中发送数据给iOS原生代码。 
    
  
  

六、调试和优化 

​​​​​​​

• 调试Flutter代码：
  
  
  
  • 使用Flutter提供的调试工具来调试Flutter代码，包括热重载和热重启等。
    
  • 使用vscode开发工具，打开flutter工程，执行flutter attach下令行
    
  
  
• 优化性能：
  
  
  
  • 集成Flutter后，关注应用的性能表现，优化Flutter页面的渲染性能，减少不须要的资源加载。
    
  
  
• 处理内存管理：
  
  
  
  • 注意Flutter和iOS使用不同的内存管理机制，确保实时开释不再使用的资源，制止内存走漏和内存占用过高的题目。
    
  
   
  

七、断点调试 

一旦将flutter模块集成到原生项目中，由其是iOS的原生项目，我们是否能够保留flutter的快速开发调试的优势呢？
即是否还可以通过Hot reload 或者 Hot Restart来快速开发呢？
那么对应flutter模块，我们如何使用hot reload加快我们的调试速度呢？
答案就是：flutter attach 调试 （开发工具：Xcode 、Visual Studio Code ）
 一：Visual Studio Code
1、 Xcode 启动原生项目 （此处flutter模块已嵌入原生,
2、创建launch.json 文件 如下图

 3、VSCode 编辑 launch.json -> 追加如下代码：

1. {
2.     "name": "Flutter: Attach to Device",
3.     "type": "dart",
4.     "request": "attach"
5. }

复制代码

 

 4、如下图选中刚刚配置的 "request": "attach" 点击 Run

5、完成配置 现在可在iOS 断点Xcode 中调试，Flutter VSCode 停止点调试

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4