Flutter   发布时间:2022-05-03  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了【Flutter 混合开发】与原生通信-MethodChannel大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

【Flutter 混合开发】与原生通信-MethodChannel

平台通信的3中方式

Flutter 与 Native 端通信有如下3个方法

  • @H_738_13@methodChAnnel:Flutter 与 Native 端相互调用调用后可以返回结果,可以 Native 端主动调用,也可以Flutter主动调用,属于双向通信。此方式为最常用的方式, Native 端调用需要在主线程中执行。
  • BasicmessageChAnnel:用于使用指定的编解码器对消息进行编码和解码,属于双向通信,可以 Native 端主动调用,也可以Flutter主动调用
  • EventChAnnel:用于数据流(event streams)的通信, Native 端主动发送数据给 Flutter,通常用于状态的监听,比如网络变化、传感器数据等。

通信架构图

此图为官方的架构图

【Flutter 混合开发】与原生通信-MethodChannel

Flutter 与 Native 端通信是异步的。

通信与平台线程

Native 端主动发送数据给 Flutter时,Native 端代码需要在主线程中执行,Android 端从子线程跳转到主线程方式:

Kotlin 代码

Handler(Looper.getMainLooper()).post {
  
}

Java 代码

new Handler(Looper.getMainLooper()).post(new Runnable() {
  @Override
  public void run() {
    
  }
});

如果可以获取到当前 Activity,也可以使用如下方式:

activity.runOnUiThread {
   
}

iOS 端从子线程跳转到主线程方式:

Objective-C 代码

dispatch_async(dispatch_get_main_queue(),^{
  
});

Swift 代码

DispatchQueue.main.async {
  
}
@H_726_74@methodChAnnel

Flutter 端

Flutter 端创建 @H_738_13@methodChAnnel 通道,用于与原生端通信:

var chAnnel = MethodChAnnel('com.Flutter.guide.MethodChAnnel');

com.Flutter.guide.MethodChAnnel 是 MethodChAnnel 的名称,原生端要与之对应。

发送消息:

var result = await chAnnel.invokeMethod('sendData',{'name': 'laomeng','age': 18})
  • 一个参数表示@H_738_13@method,方法名称,原生端会解析此参数。
  • 第二个参数表示参数,类型任意,多个参数通常使用@H_738_13@map。
  • 返回 Future,原生端返回的数据。

完整代码

class MethodChAnnelDemo extends StatefulWidget {
  @override
  _MethodChAnnelDemoState createState() => _MethodChAnnelDemoState();
}

class _MethodChAnnelDemoState extends State<MethodChAnnelDemo> {
  var chAnnel = MethodChAnnel('com.Flutter.guide.MethodChAnnel');

  var _data;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),body: column(
        children: [
          SizedBox(
            height: 50,),RaisedButton(
            child: Text('发送数据到原生'),onPressed: () async {
              var result = await chAnnel
                  .invokeMethod('sendData','age': 18});
              var name = result['name'];
              var age = result['age'];
              setState(() {
                _data = '$name,$age';
              });
            },Text('原生返回数据:$_data')
        ],);
  }
}

Android 端

android 下创建 @H_738_13@methodChAnnelDemo:

package com.Flutter.guide

import io.Flutter.plugin.common.binarymessenger
import io.Flutter.plugin.common.MethodCall
import io.Flutter.plugin.common.MethodChAnnel

/**
 * des:
 */
class MethodChAnnelDemo(messenger: Binarymessenger): MethodChAnnel.MethodCallHandler {

    private var chAnnel: MethodChAnnel

    init {
        chAnnel = MethodChAnnel(messenger,"com.Flutter.guide.MethodChAnnel")
        chAnnel.setMethodCallHandler(this)
    }

    override fun onMethodCall(call: MethodCall,result: MethodChAnnel.Result) {
        
    }
}

【Flutter 混合开发】与原生通信-MethodChannel

onMethodCall 方法Flutter 端调用 invokeMethod 方法回调,解析方法如下:

override fun onMethodCall(call: MethodCall,result: MethodChAnnel.Result) {
    if (call.method == "sendData") {
        val name = call.argument("name") as String?
        val age = call.argument("age") as Int?

        var map = mapOf("name" to "Hello,$name","age" to "$age"
        )
        result.success(map)
    }
}
  • call.method 字符串就是 invokeMethod 方法传入的 @H_738_13@method。
  • call.argument 是 invokeMethod 传入的参数,由于 Flutter 端传入的是 Map,所以上面的解析按照 Map 解析。
  • result.success() 是返回给 Flutter 的结果。

Flutter 端解析:

var result = await chAnnel
    .invokeMethod('sendData','age': 18});
var name = result['name'];
var age = result['age'];

在 @H_738_13@mainActivity 启动:

class MainActivity : FlutterActivity() {
    
    override fun configureFlutterENGIne(FlutterENGIne: FlutterENGInE) {
        super.configureFlutterENGIne(FlutterENGInE)
        MethodChAnnelDemo(FlutterENGIne.dartExecutor.binarymessenger)
    }
}

【Flutter 混合开发】与原生通信-MethodChannel

iOS 端

ios 下创建 @H_738_13@methodChAnnelDemo,按如下方式:

import Flutter
import UIKit

public class MethodChAnnelDemo {
    
    init(messenger: FlutterBinarymessenger) {
        let chAnnel = FlutterMethodChAnnel(name: "com.Flutter.guide.MethodChAnnel",binarymessenger: messenger)
        chAnnel.setMethodCallHandler { (call:FlutterMethodCall,result:@escaping FlutterResult) in
            if (call.method == "sendData") {
                if let Dict = call.arguments as? Dictionary<String,Any> {
                    let name:string = Dict["name"] as? String ?? ""
                    let age:Int = Dict["age"] as? Int ?? -1
                    result(["name":"Hello,\(Name)","age":age])
                }
            }
        }
    }
}

【Flutter 混合开发】与原生通信-MethodChannel

AppDelegate 启动:

import UIKit
import Flutter

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    
    let controller : FlutterViewController = window?.rootViewController as! FlutterViewController
    MethodChAnnelDemo(messenger: controller.binarymessenger)
    GeneratedPluginRegistrant.register(with: self)
    
    return super.application(application,didFinishLaunchingWithOptions: launchOptions)
  }
}

【Flutter 混合开发】与原生通信-MethodChannel

原生端主动发送消息给Flutter

Flutter 端接收数据
@override
void initState() {
  super.initState();
  chAnnel.setMethodCallHandler((call) {
    setState(() {
      _nativeData = call.arguments['count'];
    });
  });
}
Android 发送数据

原生端启动定时器,每隔一秒向 Flutter 发送数据,Android 端代码

class MethodChAnnelDemo(var activity: Activity,messenger: Binarymessenger) : MethodChAnnel.MethodCallHandler {

    private var chAnnel: MethodChAnnel
    private var count = 0

    init {
        chAnnel = MethodChAnnel(messenger,"com.Flutter.guide.MethodChAnnel")
        chAnnel.setMethodCallHandler(this)
        startTimer()
    }


    fun startTimer() {
        var timer = Timer().schedule(timerTask {
            activity.runOnUiThread {
                var map = mapOf("count" to count++)
                chAnnel.invokeMethod("timer",map)
            }
        },1000)

    }

    override fun onMethodCall(call: MethodCall,result: MethodChAnnel.Result) {
        if (call.method == "sendData") {
            val name = call.argument("name") as String?
            val age = call.argument("age") as Int?

            var map = mapOf("name" to "Hello,"age" to "$age"
            )
            result.success(map)
        }
    }
}

启动修改如下:

class MainActivity : FlutterActivity() {

    override fun configureFlutterENGIne(FlutterENGIne: FlutterENGInE) {
        super.configureFlutterENGIne(FlutterENGInE)
        MethodChAnnelDemo(this,FlutterENGIne.dartExecutor.binarymessenger)
        FlutterENGIne.plugins.add(MyPlugin())
    }
}

【Flutter 混合开发】与原生通信-MethodChannel

iOS 发送数据

iOS 端启动定时器代码如下:

import Flutter
import UIKit

public class MethodChAnnelDemo {
    var count =  0
    var chAnnel:FlutterMethodChAnnel
    init(messenger: FlutterBinarymessenger) {
        chAnnel = FlutterMethodChAnnel(name: "com.Flutter.guide.MethodChAnnel","age":age])
                }
            }
        }
        startTimer()
    }
    
    func startTimer() {
        var timer = Timer.scheduledTimer(timeInterval:1,target: self,SELEctor:#SELEctor(self.tickDown),userInfo:nil,repeats: truE)
    }
    @objc func tickDown(){
        count += 1
        var args = ["count":count]
        chAnnel.invokeMethod("timer",arguments:args)
    }
}

【Flutter 混合开发】与原生通信-MethodChannel

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomENGIt)、关注公众号【老孟Flutter】:

@H_730_262@ @H_730_262@

【Flutter 混合开发】与原生通信-MethodChannel

【Flutter 混合开发】与原生通信-MethodChannel

大佬总结

以上是大佬教程为你收集整理的【Flutter 混合开发】与原生通信-MethodChannel全部内容,希望文章能够帮你解决【Flutter 混合开发】与原生通信-MethodChannel所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: