flutter 按钮_Flutter 即学即用系列博客—08 MethodChannel 实现 Flutter 与原生通信

桃扇骨 2023-01-01 11:51 266阅读 0赞

![9de30c5cae26f9bc79df080868b79fa5.png][]

## 背景 ##

前面我们讲了很多 Flutter 相关的知识点，但是我们并没有介绍怎样实现 Flutter 与原生的通信。

比如我在 Flutter UI 上面点击了一个按钮，我希望原生做一些处理，那么原生怎么知道？

比如我在原生有些变化需要告知 Flutter，Flutter 又如何获知？

本篇我们先解决第一个问题。即 Flutter-> 原生的通信。

## 路由回顾 ##

之前我们一直在讲 Flutter 相关的知识点，而且基本上都是在 main.dart 文件上面折腾，为了避免很多小伙伴觉得我们跨度过大。

因此我们这里补充一下之前第三篇 Flutter 即学即用系列博客——03 在旧有项目引入 Flutter 的知识点。

在 Flutter Module 的 main.dart 文件里面，对于存在多个页面的情况，我们可以写下面的模板代码：

import 'dart:ui';
    import 'package:flutter/material.dart';
    
    void main() => runApp(_widgetForRoute(window.defaultRouteName));
    
    Widget _widgetForRoute(String route) {
      switch (route) {
        case 'route1':
          return SomeWidget(...);
        case 'route2':
          return SomeOtherWidget(...);
        default:
          return Center(
            child: Text('Unknown route: $route', textDirection: TextDirection.ltr),
          );
      }
    }

这段代码我们可以重点关注 switch 那一块代码。这里会根据不同的路由，返回不同的页面。

下面我们会用到这种写法。

## 实际案例 ##

接下来我们通过实际案例来说明**如何实现 Flutter 向原生发送消息？**

我们的案例是假设我要获取 Android 设备的当前电量，我希望点击按钮之后电量会显示出来。

当然这里的按钮和显示电量的文本都是 Flutter 界面的。

那么步骤是怎样的呢？

## 1. 搭建 Flutter 界面 ##

我们将界面写成一个单独的 battery\_widget.dart 文件：

import 'package:flutter/material.dart';
    
    class BatteryWidget extends StatefulWidget {
      @override
      _BatteryWidgetState createState() => _BatteryWidgetState();
    }
    
    class _BatteryWidgetState extends State<BatteryWidget> {
      String _batteryLevel = 'Battery level: unknown.';
    
      void _getBatteryLevel() {}
    
      @override
      Widget build(BuildContext context) {
        return Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(_batteryLevel),
              RaisedButton(
                child: const Text('Refresh'),
                onPressed: _getBatteryLevel,
              ),
            ],
          ),
        );
      }
    }

很简单的界面，就是一个文本和一个按钮，排成一列。

然后我们 main.dart 修改如下：

import 'dart:ui';
    
    import 'package:flutter/material.dart';
    import 'package:my_flutter/battery_widget.dart';
    
    void main() => runApp(_widgetForRoute(window.defaultRouteName));
    
    Widget _widgetForRoute(String route) {
      switch (route) {
        case 'battery':
          return MaterialApp(
            home: Scaffold(
              body: BatteryWidget(),
            ),
          );
        default:
          return MaterialApp(
            home: Scaffold(
              body: Container(),
            ),
          );
      }
    }

这里的关键点是指定 route 名字为 battery 时，返回我们刚刚新建的 battery\_widget 界面。

## 2. 原生调用 Flutter 界面 ##

在 MainActivity.java 里面，我们写出下面代码：

package com.nesger.flutterdemo;
    
    import android.os.Bundle;
    import android.support.v7.app.AppCompatActivity;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.FrameLayout;
    
    import io.flutter.facade.Flutter;
    
    public class MainActivity extends AppCompatActivity {
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            View flutterView = Flutter.createView(
                    MainActivity.this,
                    getLifecycle(),
                    "battery"
            );
            FrameLayout.LayoutParams layout = new FrameLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
            addContentView(flutterView, layout);
        }
    
    }

可以看到 **battery** 指定了要加载的 Flutter 界面。

运行后效果如下：

![2068a31729fda0422136327c3c691498.png][]

接下来就是关键的在点击按钮的时候如何获取原生设备电量。

根据上面的代码，我们知道点击按钮会执行 \_getBatteryLevel 方法。因此我们要在这里做一些修改。

## 3. Flutter 定义 MethodChannel ##

我们在 \_BatteryWidgetState 里面加入下面变量：

static const MethodChannel methodChannel = MethodChannel('samples.flutter.io/battery');

**http://samples.flutter.io/battery** 可以自己指定，一般保证唯一，所以 samples 实际使用可以替换为包名。主要是要跟原生对应即可。

## 4. Flutter 调用 methodChannel API invokeMethod 调用原生某个方法并获取对应的值。 ##

final int result = await methodChannel.invokeMethod('getBatteryLevel');

比如我们这里要通过原生的 getBatteryLevel 方法获取到对应的电量，并将返回值用 result 保存。

这里的 await 是因为这个操作是异步的。同时 \_getBatteryLevel 也要改为对应的异步方法，因此最终方法代码如下：

Future<void> _getBatteryLevel() async {
        String batteryLevel;
        try {
          final int result = await methodChannel.invokeMethod('getBatteryLevel');
          batteryLevel = 'Battery level: $result%.';
        } on PlatformException {
          batteryLevel = 'Failed to get battery level.';
        }
        setState(() {
          _batteryLevel = batteryLevel;
        });
      }

可以看到通过异步方法获取到电量之后通过 setState 方法更新界面。

## 5. 原生定义 MethodChannel ##

private static final String BATTERY_CHANNEL = "samples.flutter.io/battery";

注意需要跟 Flutter 的一一对应。

## 6. 原生调用创建 MethodChannel 并通过 MethodCallHandler 接收 Flutter 的方法调用 ##

new MethodChannel((FlutterView)flutterView, BATTERY_CHANNEL).setMethodCallHandler(
            new MethodChannel.MethodCallHandler() {
                @Override
                public void onMethodCall(MethodCall call, MethodChannel.Result result) {
                    if (call.method.equals("getBatteryLevel")) {
                        int batteryLevel = getBatteryLevel();
    
                        if (batteryLevel != -1) {
                            result.success(batteryLevel);
                        } else {
                            result.error("UNAVAILABLE", "Battery level not available.", null);
                        }
                    } else {
                        result.notImplemented();
                    }
                }
            }
    );

可以看到我们是通过 **call.method** 来区分 Flutter 的不同方法调用。

这里 **result.success** 返回成功回调。 **result.error** 返回错误回调。**result.notImplemented** 表明没有对应实现。

最后我们实现原生 getBatteryLevel 方法即可。

如下：

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

运行点击按钮，效果如下：

![21e872a5dc30d198d8fa4b34764ef967.png][]

到此我们 Flutter 调用原生并获取返回值的方法就介绍完了。

这里我们总结如下：

> Flutter 准备工作： 1. 定义 MethodChannel 2. 通过异步方法调用 methodChannel 的 invokeMethod 指定这个 methodChannel 具体要调用的方法名  
> 原生准备工作： 1. 定义 CHANNEL（与 Flutter 对应） 2. 创建 MethodChannel 并通过 setMethodCallHandler 方法来区分 Flutter 的不同调用方法名和返回对应的回调

**源码位置：**https://github.com/nesger/FlutterSample/tree/feature/method\_channel

## 参考链接： ##

https://flutter.dev/docs/development/platform-integration/platform-channelshttps://github.com/flutter/flutter/tree/master/examples/platform\_channel

更多阅读：**Flutter 即学即用系列博客**  
Flutter 即学即用系列博客——01 环境搭建  
Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明  
Flutter 即学即用系列博客——03 在旧有项目引入 Flutter  
Flutter 即学即用系列博客——04 Flutter UI 初窥  
Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget  
Flutter 即学即用系列博客——06 超实用 Widget 集锦  
Flutter 即学即用系列博客——07 RenderFlex overflowed 引发的思考

**Flutter & dart**  
dart 如何优雅的避空  
Flutter map 妙用及 .. 使用

![ff0c8695573060a73be2b6204a8fb980.png][]

[9de30c5cae26f9bc79df080868b79fa5.png]: /images/20221120/a1c4c41a2a914c298e616e82964010ae.png
[2068a31729fda0422136327c3c691498.png]: /images/20221120/ae0a1a0f0be4455b9c9e24a57b375253.png
[21e872a5dc30d198d8fa4b34764ef967.png]: /images/20221120/0ab28e86e9f94155a64d87fc36160874.png
[ff0c8695573060a73be2b6204a8fb980.png]: /images/20221120/ad32874744f54febacb79a303f5c41d0.png