Flutter —— 混合开发

最新推荐文章于 2025-04-23 15:29:35 发布

LinShunIos

最新推荐文章于 2025-04-23 15:29:35 发布

阅读量991

点赞数 1

分类专栏： Flutter 文章标签：动画 ios flutter

本文链接：https://blog.youkuaiyun.com/LinShunIos/article/details/121538727

版权

本文详细介绍了Flutter的混合开发，包括Flutter项目调用原生功能、原生项目嵌入Flutter的方法。通过MethodChannel和BasicMessageChannel实现Flutter与原生之间的通讯，使用第三方库imagePicker简化图片选择操作。同时讨论了原生项目嵌入Flutter的步骤，以及内存管理问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter —— 混合开发

1. 混合开发

混合开发分两种情况

Flutter 项目调用原生功能
原生的项目嵌入Flutter（比较重，不建议）

2. Flutter 项目调用原生功能

回到之前的仿微信的我的界面来做一个点击头像通过相册更换图片的功能。
在这里插入图片描述
在之前的现实头像的地方添加一个GestureDetector，并且添加onTap方法。

Flutter里面和原生通讯用的是Flutter专门提供的MethodChannel。
这里声明一个_methodChannel

  MethodChannel _methodChannel =  MethodChannel('mine_page/method');

然后在onTap使用_methodChannel里面的invokeMapMethod方法，这个时候就通知原生了。

onTap: () {
                _methodChannel.invokeMapMethod('picture');
              },

然后这个时候来到iOS，在appDelegate里面处理methodChannel。

let vc = self.window.rootViewController
        let channel =   FlutterMethodChannel.init(name: "mine_page/method", binaryMessenger: vc as! FlutterBinaryMessenger)
        
        channel.setMethodCallHandler { call, result in
            if (!call.method.isEmpty && call.method == "picture" ) {
               let imageVC =  UIImagePickerController()
                vc?.present(imageVC, animated: true, completion: nil)
                
            }
        }

这时候Flutter通讯到iOS端已经没问题了，接下来还要接受iOS返回的数据，这里也就是照片。
这时候把channel抽取出来做一个属性，然后AppDelegate遵守UIImagePickerControllerDelegate和UINavigationControllerDelegate，在UIImagePickerControllerDelegate的didFinishPickingMediaWithInfo里面拿到选中图片的url并且使用channel调用invokeMethod返回给flutter。

@objc class AppDelegate: FlutterAppDelegate, UINavigationControllerDelegate, UIImagePickerControllerDelegate {
    var channel: FlutterMethodChannel?
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        GeneratedPluginRegistrant.register(with: self)
        let vc: FlutterViewController = self.window.rootViewController as! FlutterViewController
        channel = FlutterMethodChannel.init(name: "mine_page/method", binaryMessenger: vc as! FlutterBinaryMessenger)
        let imageVC =  UIImagePickerController()
        imageVC.delegate = self
        
        channel!.setMethodCallHandler { call, result in
            if (!call.method.isEmpty && call.method == "picture" ) {
                
                vc.present(imageVC, animated: true, completion: nil)
                
            }
        }
        
        
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        picker.dismiss(animated: true) {
            let urlString:String = (info[UIImagePickerController.InfoKey(rawValue: "UIImagePickerControllerImageURL")] as! NSURL).absoluteString ?? ""
            self.channel?.invokeMethod("imagePath", arguments: urlString)
         
        }
    }
}

Flutter 中，在initState中添加调用setMethodCallHandler添加对imagePath的处理
在这里插入图片描述
这样点击后就可以获得图片的url 了。

获取图片的url之后，那么就可以根据这个url来更换头像了。
声明一个可选File属性。