Flutter 方法通道 MethodChannel 使用示例

古城微笑少年丶 2023-05-22 04:39 3阅读 0赞

### 文章目录 ###

*   *  方法通道
     *  使用示例
     *   *  获取电池电量
         *  打开应用市场
         *  使用中遇到的问题
     *  参考

## 方法通道 ##

> `Flutter`是`UI`框架，如果我们要 **调用系统的蓝牙、实现消息推送等底层** 的功能时，单使用`Flutter`就显得有点力不从心了，`Flutter` 为了解决这个问题，提供了方法通道`（Method Channel）`机制。

使用方法通道在客户端（Flutter）和宿主（平台）之间传递消息，如下图所示：  
图片来源：[https://flutter.dev/docs/development/platform-integration/platform-channels][https_flutter.dev_docs_development_platform-integration_platform-channels]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
从上图中可以看到，在 `Android` 中是通过`FlutterView`去和底层的`API`交互，而在`iOS` 中则是通过 `FlutterViewController`去和底层的`API`交互。

可以看一下`MethodChannel`的构造函数：

const MethodChannel(
    	this.name, // 用指定的 name 创建一个 MethodChannel
    	[this.codec = const StandardMethodCodec(), BinaryMessenger binaryMessenger ]// 可选参数
    )

通过构造函数我们知道使用`MethodChanle`需要传递一个特定的`name`去标识该方法通道。  
那么完整的使用`MethodChannel`的流程是怎样的呢？

通过上面的图片我们也知道，要使用方法通道需要在`host`端和`client`端做一些处理。

首先在`client`端（Flutter）做如下步骤：

*  `Flutter`端创建`MthodChannel`实例
 *  通过实例`.invokeMethod(String method, [ dynamic arguments ])`调用方法
 *  根据方法返回的结果做出相应处理

然后在`host`端（Android、iOS）,做如下步骤：

*  在 Flutter 应用的入口处添加相关逻辑，这里以`Android`为例。
 *  在 `MainActivity`中的`onCreate`方法中添加`MethodChannel`的回调处理

// CHANNEL 的值和 client 中MethodChannel 构造参数中的 name 要一致
    MethodChannel(flutterView, CHANNEL).setMethodCallHandler { call, result ->
    	// 做相关逻辑处理
    }

下面通过 3 个示例来看一下`MethodChannel`如何使用。

## 使用示例 ##

> 由于对`iOS`不熟悉，以下示例仅在`Android`端操作。示例主要是描述了`host`和`client`之间数据的传递和接收。

### 获取电池电量 ###

> `client`跳转`host`获取电池电量并返回给`client`显示。示例来源：实现源码可查看 [Flutter 中文网][Flutter]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]  
跳转`host（Android）`并将电池电量返回给`client（Flutter）`显示：

// Flutter 端获取电池电量（getBatteryLevel 和 Android 中定义的方法一样，返回值是 Int，所以通过 Int 接收。）
    
    final int result = await platform.invokeMethod('getBatteryLevel');
    setState(() {
      _batteryLevel = result ; // 刷新返回的结果
    });
        
    // 而在 Android 端通过判断 getBatteryLevel 方法名是否一致，然后去执行具体的电量获取
     
     val batteryLevel = getBatteryLevel() // 获取电池电量
     if (batteryLevel != -1) {
     	// 返回获取到的电量 success 接收的是个 Object
         result.success(batteryLevel)
       }else {
         result.error("UNAVAILABLE", "Battery level not available.", null)
       }

接下来看看`client`如何给`host`传递数据。

### 打开应用市场 ###

> `client`跳转`host`并传递参数，这里以`Android`为例 将传递`appId 和 packageName`传递给给`host`。模拟器没有应用商店可能会出问题。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]

主要是在调用`invokMethod`时传入参数：

final int result = await platform.invokeMethod('openAppStore',<String, dynamic>{
      'appId': "123456",
      'packageName': "com.meizu.mstore",
    });

之后就可在`Android`控制台中输出接收的参数信息：  
![在这里插入图片描述][20200425162429538.png]

### 使用中遇到的问题 ###

*  \[ERROR:flutter/lib/ui/ui\_dart\_state.cc(157)\] Unhandled Exception: MissingPluginException(No implementation found for method openAppStore on channel samples.flutter.io/battery)  
    channel name 不能相同，或者手机没有 market 导致

源码中有这么一段话：

/// The logical identity of the channel is given by its name. Identically named
    /// channels will interfere with each other's communication.

大致意思是：**通道的逻辑标识由其名称给出。名称相同的///通道将干扰彼此的通信。**

## 参考 ##

*  https://time.geekbang.org/column/article/127601
 *  https://flutterchina.club/platform-channels/

[https_flutter.dev_docs_development_platform-integration_platform-channels]: https://flutter.dev/docs/development/platform-integration/platform-channels
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230521/ef446d730a464dffaab87ec74f3a7297.png
[Flutter]: https://flutterchina.club/platform-channels/#example-kotlin
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230521/1ff8054874544a7785528feeb38eb6c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230521/65ec741a693145d2ba4f08dac8918958.png
[20200425162429538.png]: /images/20230521/8a8275e3dec64f7e84c129b224c60072.png