Flutter系列之Platform Channel使用详解

躬行之
4,554 阅读4分钟

PS：很多情境中，80% 的已知效果源自 20% 的可能原因。

前面几篇文章介绍了 Navigator 组件、Flex 布局、图片加载、Widget 生命周期、混合开发等 Flutter 开发基础知识， 文章如下：

下面介绍一下 Flutter 混合开发中 Platform Channel 的使用，主要内容如下：

  1. 平台通道介绍
  2. 平台数据类型对照
  3. BasicMessageChannel
  4. MethodChannel
  5. EventChannel

平台通道介绍

Platform Channel 是一个异步消息通道，消息在发送之前会编码成二进制消息，接收到的二进制消息会解码成 Dart 值，其传递的消息类型只能是对应的解编码器支持的值，所有的解编码器都支持空消息，其 Native 与 Flutter 通信架构如下图所示：

Flutter 中定义了三种不同类型的 PlatformChannel，主要有三种如下：

  • BasicMessageChannel：用于数据传递；
  • MethodChannel：用于传递方法调用；
  • EventChannel：用于传递事件；

其构造方法都需指定一个通道标识、解编码器以及 BinaryMessenger，BinaryMessenger 是一个 Flutter 与平台的通信工具，用来传递二进制数据、设置对应的消息处理器等。

解编码器有两种分别是 MethodCodec 和 MessageCodec，前者对应方法后者对应消息，BasicMessageChannel 使用的是 MessageCodec，MethodChannel 和 EventChannel 使用的是 MethodCodec。

平台数据类型对照

Platform Channel 提供不同的消息解码机制，如 StandardMessageCodec 提供基本数据类型的解编码、JSONMessageCodec 支持 Json 的解编码等，在平台之间通信时都会自动转换，各平台数据类型对照如下：

BasicMessageChannel

BasicMessageChannel 主要用来数据传递，包括二进制数据，借助 BasicMessageChannel 可以实现 MethodChannel 和 EventChannel 的功能，这里用 BasicMessageChannel 实现 Android 项目使用 Flutter 资源文件的案例，关键流程如下：

  1. Flutter 端获得图片资源对应的二进制数据，这里使用 BinaryCodec，则数据格式为 ByteData;
  2. 使用 BasicMessageChannel 发送图片对应的数据;
  3. 在 Android 端使用 ByteBuffer 接收，并将其转换成 ByteArray，然后解析成 Bitmap 显示出来。

Flutter 端关键代码如下：

// 创建BasicMessageChannel 
_basicMessageChannel = BasicMessageChannel<ByteData>("com.manu.image", BinaryCodec());

// 获取assets中的图片对应的ByteData数据
rootBundle.load('images/miao.jpg').then((value) => {
  _sendStringMessage(value)
});

// 发送图片数据
_sendStringMessage(ByteData byteData) async {
  await _basicMessageChannel.send(byteData);
}

Android 端关键代码如下：

override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    Log.i(tag, "configureFlutterEngine")
    // 设置消息处理器
    BasicMessageChannel<ByteBuffer>(
        flutterEngine.dartExecutor, "com.manu.image", BinaryCodec.INSTANCE
    ).setMessageHandler { message, reply ->
        Log.i(tag, "configureFlutterEngine > message:$message")
        // 数据转换：ByteBuffer->ByteArray
        val byteBuffer = message as ByteBuffer
        imageByteArray = ByteArray(byteBuffer.capacity())
        byteBuffer.get(imageByteArray)
    }

    // 用于设置Flutter跳转Android的方法处理器
    MethodChannel(flutterEngine.dartExecutor, channel).setMethodCallHandler { call, result ->
        Log.i(tag, "configureFlutterEngine > method:${call.method}")
        if ("startBasicMessageChannelActivity" == call.method) {
            // 携带图片数据
            BasicMessageChannelActivity.startBasicMessageChannelActivity(this,imageByteArray)
        }
    }
}

// 显示来自Flutter assets中的图片
val imageByteArray = intent.getByteArrayExtra("key_image")
val bitmap = BitmapFactory.decodeByteArray(imageByteArray,0,imageByteArray.size)
imageView.setImageBitmap(bitmap)

另外，BasicMessageChannel 结合 BinaryCodec 是支持大内存数据块的传递的。

MethodChannel

MethodChannel 主要用来方法的传递，自然可以传递 Native 方法和 Dart 方法，即可以通过 MethodChannel 在 Flutter 中调用 Android 原生方法，在 Android 中调用 Dart 方法，互相调用都是通过 MethodChannel 的 invokeMethod 方法调用的，通信时必须使用相同的通道标识符，具体如下：

  1. Flutter调用Android方法

下面通过 MethodChannel 实现从 Flutter 跳转到 Android 原生界面 MainActivity，Android 端如下：

/**
 * @desc FlutterActivity
 * @author jzman
 */
val tag = AgentActivity::class.java.simpleName;

class AgentActivity : FlutterActivity() {
    val tag = AgentActivity::class.java.simpleName;
    private val channel = "com.manu.startMainActivity"
    private var platform: MethodChannel? = null;

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        Log.d(tag,"configureFlutterEngine")
        platform = MethodChannel(flutterEngine.dartExecutor, channel)
        // 设置方法处理器
        platform!!.setMethodCallHandler(StartMethodCallHandler(this@AgentActivity))
    }

    companion object{
        /**
         * 重新创建NewEngineIntentBuilder才能保证生效
         */
        fun withNewEngine(): MNewEngineIntentBuilder? {
            return MNewEngineIntentBuilder(AgentActivity::class.java)
        }
    }

    /**
     * 自定义NewEngineIntentBuilder
     */
    class MNewEngineIntentBuilder(activityClass: Class<out FlutterActivity?>?) :
        NewEngineIntentBuilder(activityClass!!)

    /**
     * 实现MethodCallHandler
     */
    class StartMethodCallHandler(activity:Activity) : MethodChannel.MethodCallHandler{
        private val context:Activity = activity
        override fun onMethodCall(call: MethodCall, result: MethodChannel.Result) {
            if ("startMainActivity" == call.method) {
                Log.i(tag,"arguments:"+call.arguments)
                startMainActivity(context)
                // 向Flutter回调执行结果
                result.success("success")
            } else {
                result.notImplemented()
            }
        }
    }
}

如上还可以使用 MethodChannel.Result 对象向Flutter回调执行结果，Flutter 端如下：

/// State
class _PageState extends State<PageWidget> {
  MethodChannel platform;

  @override
  void initState() {
    super.initState();
    platform = new MethodChannel('com.manu.startMainActivity');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      margin: EdgeInsets.fromLTRB(8, 8, 8, 0),
      child: RaisedButton(
        onPressed: () {
          _startMainActivity();
        },
        child: Text("Flutter to Android"),
      ),
    );
  }

  /// 跳转到原生Activity
  void _startMainActivity() {
    platform.invokeMethod('startMainActivity', 'flutter message').then((value) {
      // 接收返回的数据
      print("value:$value");
    }).catchError((e) {
      print(e.message);
    });
  }
}
  1. Android调用Dart方法

下面通过 MethodChannel 调用 Flutter 中的 Dart 方法 getName，Android 端代码如下：

/**
 * @desc MainActivity
 * @author jzman
 */
class MainActivity : FlutterActivity() {
    private val tag = MainActivity::class.java.simpleName;
    private val channel = "com.manu.startMainActivity"
    private var methodChannel: MethodChannel? = null
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        btnGetDart.setOnClickListener {
            getDartMethod()
        }
    }

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        Log.i(tag,"configureFlutterEngine")
        methodChannel = MethodChannel(flutterEngine.dartExecutor,channel)
    }

    private fun getDartMethod(){
        methodChannel?.invokeMethod("getName",null, object :MethodChannel.Result{
            override fun success(result: Any?) {
                Log.i(tag,"success: "+result.toString())
                Toast.makeText(this@MainActivity,result.toString(),Toast.LENGTH_LONG).show()
            }

            override fun error(errorCode: String,errorMessage: String?,errorDetails: Any?) {
                Log.i(tag,"error")
            }

            override fun notImplemented() {
                Log.i(tag,"notImplemented")
            }
        })
    }

    companion object{
        fun startMainActivity(context: Context) {
            val intent = Intent(context, MainActivity::class.java)
            context.startActivity(intent)
        }
    }
}

Flutter 端如下：

/// State
class _PageState extends State<PageWidget> {
  MethodChannel platform;

  @override
  void initState() {
    super.initState();
    platform = new MethodChannel('com.manu.startMainActivity');

    // 监听Android调用Flutter方法
    platform.setMethodCallHandler(platformCallHandler);
  }

  @override
  Widget build(BuildContext context) {
    return Container();
  }
  /// FLutter Method
  Future<dynamic> platformCallHandler(MethodCall call) async{
    switch(call.method){
      case "getName":
        return "name from flutter";
        break;
    }
  }
}

EventChannel

EventChannel 主要用于 Flutter 到原生之间的单向调用，其使用方式类似 Android 中的广播，原生界面负责 Event 的发送，Flutter 端注册监听即可，不多说直接看代码，Android 端代码如下：

/// Android
class MFlutterFragment : FlutterFragment() {
    // 这里用Fragment，Activity也一样
    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        Log.d(tag,"configureFlutterEngine")
        EventChannel(flutterEngine.dartExecutor,"com.manu.event").setStreamHandler(object:
            EventChannel.StreamHandler{
            override fun onListen(arguments: Any?, events: EventChannel.EventSink?) {
                Log.i(tag,"configureFlutterEngine > onListen")
                // EventSink发送事件通知
                events?.success("event message")
            }

            override fun onCancel(arguments: Any?) {
                Log.i(tag,"configureFlutterEngine > onCancel")
            }
        })
    }

    companion object{
        fun withNewEngine(): NewEngineFragmentBuilder? {
            return MNewEngineIntentBuilder(
                MFlutterFragment::class.java
            )
        }
    }

    class MNewEngineIntentBuilder(activityClass: Class<out FlutterFragment?>?) :
        NewEngineFragmentBuilder(activityClass!!)
}

Flutter 端如下：

/// State
class EventState extends State<EventChannelPage> {
  EventChannel _eventChannel;
  String _stringMessage;
  StreamSubscription _streamSubscription;

  @override
  void initState() {
    super.initState();
    _eventChannel = EventChannel("com.manu.event");
    // 监听Event事件
    _streamSubscription =
        _eventChannel.receiveBroadcastStream().listen((event) {
      setState(() {
        _stringMessage = event;
      });
    }, onError: (error) {
      print("event error$error");
    });
  }

  @override
  void dispose() {
    super.dispose();
    if (_streamSubscription != null) {
      _streamSubscription.cancel();
      _streamSubscription = null;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("EventChannel"),
          centerTitle: true,
        ),
        body: Center(
          child: Text(_stringMessage == null ? "default" : _stringMessage),
        ));
  }
}

以上就是 Flutter 平台通道的使用，可以在公众号躬行之回复关键字【Channel】获取源码。

avatar
文章
阅读
粉丝
相关推荐
Flutter混编工程之打通纹理之路
4.2k阅读
 · 
17点赞
定位Flutter内存问题很难么？
3.7k阅读
 · 
16点赞
Flutter 中 SizedBox、FractionallySizedBox、LimitedBox、AspectRatio 的使用详解
1.4k阅读
 · 
8点赞
通过58 fair源代码了解如何使用Dart-FFI在Flutter中直接调用C代码
185阅读
 · 
0点赞
Flutter与原生通信之EventChannel
1.7k阅读
 · 
2点赞
Flutter - 通过CustomMultiChildLayout自定义环形布局
1.7k阅读
 · 
9点赞
深入了解Flutter的isolate(3) --- Flutter的thread model（线程模型）
7.3k阅读
 · 
22点赞
Flutter混合开发组件化与工程化架构
5.1k阅读
 · 
46点赞
Flutter动画的基本使用
814阅读
 · 
9点赞

友情链接：