Flutter第三部分（平台整合）：Flutter中特定平台代码的编写

雨点打透心脏的1/2处 2022-01-16 01:27 524阅读 0赞

> 前言：Flutter系列的文章我应该会持续更新至少一个月左右，从User Interface(UI)到数据相关（文件、数据库、网络）再到Flutter进阶（平台特定代码编写、测试、插件开发等），欢迎感兴趣的读者持续关注(可以扫描左边栏二维码或者搜索”IT工匠“关注微信公众号/头条号（微信公众号和头条号同名），会同步推送)。

本文主要介绍如何编写平台特定的代码，`Flutter`使用了一套灵活的系统以保证我们可以调用特定平台的`API`，这里的\*\*"特定平台的API”\*\*可以是由`Android`上的`Java`或`Kotlin`代码构建的，也可以是`iOS`上由`ObjectiveC`或`Swift`代码构建的。

`Flutter`对特定平台`API`的调用是基于这样一套流程的：

*  `Flutter`代码通过平台通道（`platform channel`）将消息发送到原生代码层即我们的特定平台的代码层（`iOS`或`Android`）。
 *  `iOS`或者`Android`层的原生代码通过对平台通道的监听，在合适的时机接收`Flutter`代码发送的消息。
 *  `iOS`或者`Android`层的原生代码根据接收到的消息调用不同的本平台的原生`API`
 *  `iOS`或者`Android`层的原生代码将原生`API`的执行结果返回给`Flutter`层的代码

整个过程的示意图是这样的：

![hcev5-pgtmp][]

> 注意：如果你需要在`Java/Kotlin/Objective-C/Swift`中使用特定平台独有的`API`或库，可以通过本文的内容进行实现，但是，如果你只是想根据不同的平台执行不同的代码，则不需要使用本文的办法编写平台特定的代码，只需要在`Flutter`应用程序通过检查`defaultTargetPlatform`属性的值来确定当前程序运行的平台，然后根据当前平台调用不同的`Dart`代码即可。

### 框架概述：平台通道 ###

这里我们首先规定两个术语，我们将`Flutter`层的代码称为**客户端**代码，将`Android`或`iOS`层的平台特定代码称为**宿主端**代码。

使用平台通道在客户端（`Flutter UI`）和宿主（`Android`或`iOS`平台）之间传递消息的原理示意图如下：

![Platform channels architecture][]

发送消息和等待响应都是异步的过程，这样可以保证不会造成我们用户界面的阻塞。

在客户端（`Flutter`层），`MethodChannel` API可以发送与方法调用相对应的消息。

在宿主平台上（`Android`或`iOS`层），`Android`上的`MethodChannel` API和`iOS`上的`FlutterMethodChannel` API 可以通过接收从平台通道传递过来的方法调用请求从而进行对应的方法的调用，最后将调用结果通过平台通道返回给客户端。

**注意**: 如果需要，特定平台也可以反过来调用`Flutter`层的`API`。

#### 平台通道支持的数据类型和解码器 ####

标准平台通道使用标准消息编解码器，以支持简单的类似`JSON`值的高效二进制序列化，例如 `booleans,numbers, Strings, byte buffers, List, Maps`等， 当你通过平台通道进行消息的发送和接收时，被发送的消息会自动进行序列化（发送时）和反序列化（接收时）。

下表列出了`Dart`语言中的数据类型在`Android`和`iOS`的对应类型：

<table> 
 <thead> 
  <tr> 
   <th align="left">Dart</th> 
   <th align="left">Android</th> 
   <th align="left">iOS</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><code>null</code></td> 
   <td align="left"><code>null</code></td> 
   <td align="left"><code>nil (NSNull when nested)</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>bool</code></td> 
   <td align="left"><code>java.lang.Boolean</code></td> 
   <td align="left"><code>NSNumber numberWithBool:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>int</code></td> 
   <td align="left"><code>java.lang.Integer</code></td> 
   <td align="left"><code>NSNumber numberWithInt:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>int</code>, 如果32位<code>int</code>不够用</td> 
   <td align="left"><code>java.lang.Long</code></td> 
   <td align="left"><code>NSNumber numberWithLong:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>int</code>, 如果64位<code>int</code>不够用</td> 
   <td align="left"><code>java.math.BigInteger</code></td> 
   <td align="left"><code>FlutterStandardBigInteger</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>double</code></td> 
   <td align="left"><code>java.lang.Double</code></td> 
   <td align="left"><code>NSNumber numberWithDouble:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>String</code></td> 
   <td align="left"><code>java.lang.String</code></td> 
   <td align="left"><code>NSString</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>Uint8List</code></td> 
   <td align="left"><code>byte[]</code></td> 
   <td align="left"><code>FlutterStandardTypedData typedDataWithBytes:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>Int32List</code></td> 
   <td align="left"><code>int[]</code></td> 
   <td align="left"><code>FlutterStandardTypedData typedDataWithInt32:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>Int64List</code></td> 
   <td align="left"><code>long[]</code></td> 
   <td align="left"><code>FlutterStandardTypedData typedDataWithInt64:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>Float64List</code></td> 
   <td align="left"><code>double[]</code></td> 
   <td align="left"><code>FlutterStandardTypedData typedDataWithFloat64:</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>List</code></td> 
   <td align="left"><code>java.util.ArrayList</code></td> 
   <td align="left"><code>NSArray</code></td> 
  </tr> 
  <tr> 
   <td align="left"><code>Map</code></td> 
   <td align="left"><code>java.util.HashMap</code></td> 
   <td align="left"><code>NSDictionary</code></td> 
  </tr> 
 </tbody> 
</table>

### 实例: 使用平台通道获取设备当前电量 ###

下面我们来通过一个实例展示如何在`Flutter`中实现特定平台`API`的调用，我们要实现的功能是通过调用平台特定的`API`来获取和显示当前设备的电池电量。实现的方法是通过调用`Android`端的`BatteryManager API`和`iOS`端的 `device.batteryLevel API` 进行当前设备电量的获取。

#### 第一步: 创建一个新的应用程序项目 ####

首先创建一个新的应用程序:

*  在终端运行中：`flutter create batterylevel`

默认情况下，模板支持使用`Java`编写`Android`代码，或使用`Objective-C`编写`iOS`代码。要使用`Kotlin`或`Swift`，请使用`-i`和/或`-a`标志:

*  在终端中运行: `flutter create -i swift -a kotlin batterylevel`

#### 第二步: 创建Flutter平台客户端 ####

应用的`State`类拥有当前的应用状态，我们需要继承这个类以托管当前设备的电量。

首先，我们构造一个通道（`MethodChannel`），在构造通道的时候需要传入一个通道名称，这个通道名称是客户端和宿主端进行连接的纽带（或者理解为密匙），我们所指定的通道名称必须在本app内是全局唯一的，Flutter官方的建议是在通道名称前加一个唯一的`“域名前缀”`以避免通道名称的冲突，例如`flutter_demo_code.channel_demo.chennel/battery`：

class _MyAppState extends State<MyApp> {
      static const platform =
          const MethodChannel('flutter_demo_code.channel_demo.chennel/battery');
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text('IT工匠'),
            ),
            body: Center(
              child: Text('demo'),
            ),
          ),
        );
      }
    }

构件好通道（`MethodChannel`）之后，我们就可以通过构建好的通道调用特定平台的方法了，这里使用的是`MethodChannel.invokeMethod<T>(String method, [ dynamic arguments ])` 方法，该方法接收两个参数：

*  `method`：`String`类型的参数，表示特定平台上被调用的方法名称
 *  `[ dynamic arguments ]`：一个数组，表示的是调用特定平台上方法时传入的参数

以我们这个例子来说，我们稍后会在`Android`端和`iOS`端分别写一个`int getBatteryLevel()`方法，这个方法的作用是获取当前设备的电量并返回，那么这里的`method`就应该传入`getatteryLevel`这个字符串，注意没有`()`，而如果还需要传递参数，直接构造一个`[ dynamic arguments]`类型的参数并传递进去即可，我们来看我们的代码实现（注意看注释）：

String _batteryLevel = '电池电量未知';
    
      Future<Null> _getBatteryLevel() async {
        String batteryLevel;
        /**
        这里使用了一个try…catch将 platform.invokeMethod()方法包裹了起来，原因是该方法的调用是有可能失败的，或者说是有可能抛出异常的，比如当平台不支持平台API（例如在模拟器中运行）时。
        */
        try {
          final int result = await platform.invokeMethod('getBatteryLevel');
          batteryLevel = '当前电量：$result % .';
        } on PlatformException catch (e) {
          batteryLevel = "获取电池电量失败，失败原因： '${e.message}'.";
        }
    
        //使用返回的结果，在setState中来更新用户界面状态batteryLevel。
        setState(() {
          _batteryLevel = batteryLevel;
        });

最后，我们在`build()`中分别添加一个用于显示当前电池电量的`Text`和用于更新当前电池电量的`RaisedButton`：

@override
    Widget build(BuildContext context) {
      return new Material(
        child: new Center(
          child: new Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              new RaisedButton(
                child: new Text('获取当前设备电量'),
                onPressed: _getBatteryLevel,
              ),
              new Text(_batteryLevel),
            ],
          ),
        ),
      );
    }

#### 第三步: 使用Java添加Android平台的特定实现 ####

首先在`Android Studio`中打开您的`Flutter`应用的`Android`部分（当然，如果你习惯直接在`Flutter`项目中修改`iOS`部分也是没问题的）：

1.  启动 `Android Studio`
2.  选择 `‘File > Open…’`
3.  定位到你的 `Flutter app`目录, 然后选择里面的 `android`文件夹，点击 `OK`
4.  在`java`目录下打开 `MainActivity.java`

接下来，在`onCreate()`里做两件事：

*  构造一个管道(`MethodChannel`）的实例，在构造管道的时候传入我们刚才在`Flutter`平台上指定的管道名称`flutter_demo_code.channel_demo.chennel/battery`
 *  为构造好的管道(`MethodChannel`）类设置`MethodCallHandler`，相当于对管道进行监听，当`Flutter`调用本管道的方法时，会在`MethodCallHandler`的`onMethodCall()`方法收到回调

具体实现代码如下：

import io.flutter.app.FlutterActivity;
    import io.flutter.plugin.common.MethodCall;
    import io.flutter.plugin.common.MethodChannel;
    import io.flutter.plugin.common.MethodChannel.MethodCallHandler;
    import io.flutter.plugin.common.MethodChannel.Result;
    
    public class MainActivity extends FlutterActivity {
        
         private static final String CHANNEL = "flutter_demo_code.channel_demo.chennel/battery";
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
        
    
            super.onCreate(savedInstanceState);
    
            new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
                    new MethodCallHandler() {
        
                        @Override
                        public void onMethodCall(MethodCall call, Result result) {
        
                            // TODO
                        }
                    });
        }
    }

然后我们使用`Java`代码，基于`Android`电池`API`来获取当前设备的电量：

private int getBatteryLevel() {
        
      int batteryLevel = -1;
      if (VERSION.SDK_INT >= VERSION_CODES.LOLLIPOP) {
        
        BatteryManager batteryManager = (BatteryManager) getSystemService(BATTERY_SERVICE);
        batteryLevel = batteryManager.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY);
      } else {
        
        Intent intent = new ContextWrapper(getApplicationContext()).
            registerReceiver(null, new IntentFilter(Intent.ACTION_BATTERY_CHANGED));
        batteryLevel = (intent.getIntExtra(BatteryManager.EXTRA_LEVEL, -1) * 100) /
            intent.getIntExtra(BatteryManager.EXTRA_SCALE, -1);
      }
    
      return batteryLevel;
    }

最后，我们完成之前添加的`onMethodCall()`方法。我们需要处理管道中方法名为`getBatteryLevel`的调用，所以我们对`call`参数进行检查，看当前`call`参数中的方法名是否为`getBatteryLevel`，如果是，则调用上一步编写的`getBatteryLevel()`方法并将结果通过`result`返回给`Flutter`层：

@Override
    public void onMethodCall(MethodCall call, Result result) {
        
        if (call.method.equals("getBatteryLevel")) {
        
            int batteryLevel = getBatteryLevel();
            if (batteryLevel != -1) {
        
                result.success(batteryLevel);
            } else {
        
                //如果出现错误调用这个方法，Flutter层会抛出PlatformException异常
                result.error("UNAVAILABLE", "Battery level not available.", null);
            }
        } else {
        
          //Flutter层会抛出MissingPluginException异常
            result.notImplemented();
        }
    }

现我们就可以在`Android`设备上运行该`Flutter`程序,运行效果是这样的：

![aazeo-b64dk][]

需要说明的是，本小节在`Android`端使用的是`Java`语言，如果你想使用`Kotlin`，也是完全可以的，逻辑完全一样，只是代码语法不同而已。

#### 第四步: 使用Objective-C添加iOS平台的特定实现 ####

使用`Xcode`打开`Flutter`应用程序中的`iOS`部分（当然，如果你习惯直接在`Flutter`项目中修改`iOS`部分也是没问题的）:

1.  启动 `Xcode`
2.  选择 `‘File > Open…’`
3.  定位到你的 `Flutter app`目录, 然后选择里面的 `iOS`文件夹，点击 `OK`
4.  确保`Xcode`项目的构建没有错误。
5.  选择 `Runner > Runner` ，打开`AppDelegate.m`

接下来，进行两步操作：

*  在`application didFinishLaunchingWithOptions:`方法内部创建一个管道(`FlutterMethodChannel`），确保管道名称为`flutter_demo_code.channel_demo.chennel/battery`
 *  为创建好的管道添加一个处理方法

实现代码如下：

- (BOOL)application:(UIApplication *)application
        didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        
      [GeneratedPluginRegistrant registerWithRegistry:self];
      // Override point for customization after application launch.
        FlutterViewController* controller = (FlutterViewController*)self.window.rootViewController;
        
        FlutterMethodChannel* batteryChannel = [FlutterMethodChannel methodChannelWithName:@"flutter_demo_code.channel_demo.chennel/battery"
                                                binaryMessenger:controller];
        
        [batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        
            //TODO
        }];
      return [super application:application didFinishLaunchingWithOptions:launchOptions];
    }

然后，我们基于`ObjectiveC`代码，通过`iOS`电池`API`来获取电池电量：

- (int)getBatteryLevel {
        
      UIDevice* device = UIDevice.currentDevice;
      device.batteryMonitoringEnabled = YES;
      if (device.batteryState == UIDeviceBatteryStateUnknown) {
        
        return -1;
      } else {
        
        return (int)(device.batteryLevel * 100);
      }
    }

最后，我们完成之前添加的`setMethodCallHandler`方法，对平台方法名为`getBatteryLevel`的管道调用进行捕捉和处理，将处理的返回结果返回给`Flutter`层：

[batteryChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
        
      if ([@"getBatteryLevel" isEqualToString:call.method]) {
        
        int batteryLevel = [self getBatteryLevel];
    
        if (batteryLevel == -1) {
        
          result([FlutterError errorWithCode:@"UNAVAILABLE"
                                     message:@"Battery info unavailable"
                                     details:nil]);
        } else {
        
          result(@(batteryLevel));
        }
      } else {
        
        result(FlutterMethodNotImplemented);
      }
    }];

现我们就可以在`Android`设备上运行该`Flutter`程序了，由于贫穷限制了笔者，所以此处放不出真机演示图，大家自行脑补。

需要说明的是，本小节在`iOS`端使用的是`Objective-C`语言，如果你想使用`Swift`，也是完全可以的，逻辑完全一样，只是代码语法不同而已。

### 从UI代码中分离平台特定的代码 ###

如果你希望在你的平台特定代码可以用在多个`Flutter`程序中，那么将这部分抽取出来做成一个`packages`会十分有效，关于`packages`部分我会在明天进行介绍，欢迎关注。

### 将平台特定的代码作为一个包发布 ###

如果您希望与`Flutter`生态系统中的其他开发人员分享你的特定平台代码，可以将需要共享的部分抽取出来做成一个插件进行发布，关于这部分我也会在明天进行介绍，欢迎关注。

[hcev5-pgtmp]: /images/20220115/5b78cbf33d4944a6a0cd8b6942c38581.png
[Platform channels architecture]: /images/20220115/31b1289589f04bfbb643fa48bfe9c5cd.png
[aazeo-b64dk]: /images/20220115/9fcf6fa382a3418c8db193e83dcb3e70.png