Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信
背景
前面我们讲了很多 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 界面。
运行后效果如下:
接下来就是关键的在点击按钮的时候如何获取原生设备电量。
根据上面的代码,我们知道点击按钮会执行 _getBatteryLevel 方法。因此我们要在这里做一些修改。
3. Flutter 定义 MethodChannel
我们在 _BatteryWidgetState 里面加入下面变量:
static const MethodChannel methodChannel = MethodChannel('samples.flutter.io/battery');
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);
}
}
运行点击按钮,效果如下:
到此我们 Flutter 调用原生并获取返回值的方法就介绍完了。
这里我们总结如下:
Flutter 准备工作:
- 定义 MethodChannel
- 通过异步方法调用 methodChannel 的 invokeMethod 指定这个 methodChannel 具体要调用的方法名
原生准备工作:
- 定义 CHANNEL(与 Flutter 对应)
- 创建 MethodChannel 并通过 setMethodCallHandler 方法来区分 Flutter 的不同调用方法名和返回对应的回调
源码位置:
https://github.com/nesger/FlutterSample/tree/feature/method_channel
参考链接:
https://flutter.dev/docs/development/platform-integration/platform-channels
https://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 妙用及 .. 使用
Flutter 即学即用系列博客——08 MethodChannel 实现 Flutter 与原生通信的更多相关文章
- Flutter 即学即用系列博客——09 MethodChannel 实现原生与 Flutter 通信(二)
前言 上一篇我们讲解了如何通过 EventChannel 实现 Android -> Flutter 的通信. 并且也看到了 Flutter 内部 EventChannel 源码也是对 Meth ...
- Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明
前言 上一篇文章我们搭建好了 Flutter 的开发环境. Flutter 即学即用--01 环境搭建 这一篇我们通过 Flutter 的一个 Demo 来了解下 Flutter. 开发系统:MAC ...
- Flutter 即学即用系列博客——09 EventChannel 实现原生与 Flutter 通信(一)
前言 紧接着上一篇,这一篇我们讲一下原生怎么给 Flutter 发信号,即原生-> Flutter 还是通过 Flutter 官网的 Example 来讲解. 案例 接着上一次,这一次我们让原生 ...
- Flutter 即学即用系列博客总结篇
前言 迟到的总结篇,其实大家看我之前发的系列博客最后一篇,发文时间是 3 月 29 日.距离现在快两个月了. 主要是因为有很多事情在忙,所以这篇就耽搁了. 今天终于可以跟大家会面了. 系列博客背景 F ...
- Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget
前言 上一篇我们对 Flutter UI 有了一个基本的了解. 这一篇我们通过自定义 Widget 来了解下如何写一个 Widget? 然而 Widget 有两个,StatelessWidget 和 ...
- Flutter 即学即用系列博客——04 Flutter UI 初窥
前面三篇可以算是一个小小的里程碑. 主要是介绍了 Flutter 环境的搭建.如何创建 Flutter 项目以及如何在旧有 Android 项目引入 Flutter. 这一篇我们来学习下 Flutte ...
- Flutter 即学即用系列博客——06 超实用 Widget 集锦
本篇文章我们来讲讲一些比较常用的 Widget. 大家验证的时候使用下面的代码替换 main.dart 代码,然后在 //TODO 语句返回下面常用 Widget 示例的代码. import 'pac ...
- Flutter 即学即用系列博客——03 在旧有项目引入 Flutter
前言 其实如果打算在实际项目中引入 Flutter,完全将旧有项目改造成纯 Flutter 项目的可能性比较小,更多的是在旧有项目引入 Flutter. 因此本篇我们就说一说如何在旧有项目引入 Flu ...
- Flutter 即学即用系列博客——10 混淆
前言 之前的博客我们都是在 debug 的模式下进行开发的. 实际发布到市场或者给到用户的都是 release 包. 而对于 Android 来说,release 包一个重要的步骤就是混淆. Andr ...
随机推荐
- 高数量类别特征(high-cardinality categorical attributes)的预处理方法
high-cardinality categorical attributes,从字面上理解,即对于某个category特征,不同值的数量非常多,这里暂且把它叫做高数量类别属性.反之,即低数量类别属性 ...
- Java基础-抽象类和接口
抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 抽象定义: 抽象 ...
- Spark学习之Spark Streaming
一.简介 许多应用需要即时处理收到的数据,例如用来实时追踪页面访问统计的应用.训练机器学习模型的应用,还有自动检测异常的应用.Spark Streaming 是 Spark 为这些应用而设计的模型.它 ...
- MIP 脚本域名地址变更公告
尊敬的 MIP 开发者: MIP 团队为了解决 MIP-Cache 页面下 cookie 相互覆盖问题,增强站点品牌露出,在 2017 年 8 月将 MIP 的脚本域名和 MIP-Cache 页面域名 ...
- 改造MIP获得搜索青睐,轻松完成SEO
搜索引擎目标及页面排序方法 搜索引擎作为互联网流量的入口,承担着流量分发的职责.但排序成千上万的网页,决定哪些网页在第一页,是由网页本身的用户体验决定的.权重算法会从内容优质性,广告多少,加载速度等多 ...
- 自学java难吗?一个JAVA学习者应该具备的素质
无论是在校的学生也好,还是转行的也好,如今学JAVA开发的人越来越多,造成了如今新手越来越多,有人说前端饱和了,JAVA饱和了,JAVA才刚开始以一种好的势头发展就饱和了.我也是无语,一般说饱和的人, ...
- windows粘贴板操作-自己的应用和windows右键互动
一.粘贴板操作函数 BOOL OpenClipboard(HWND hWnd);参数 hWnd 是打开剪贴板的窗口句柄,成功返回TRUE,失败返回FALSE BOOL CloseClipboard() ...
- redis测试实践
最近测试服务端的时候,接触到了redis,之前也看过,但不系统,借着这次实践,记录一下. 一.写在前面 Redis是一个开源的使用ANSI C语言编写.遵守BSD协议.支持网络.可基于内存亦可持久化的 ...
- 面试题-浅谈JavaScript中的This指向问题
各位小伙伴在面试中被面试官问道this指向问题一定不少吧,同时还被问道apply,call和bind的用法区别,现在,就来简单的聊一聊this到底指向何方. 1.基本概念 MDN的官方解释:与其他语言 ...
- HTTP网络协议与手写Web服务容器
Http协议 1.深入概念 Http:HyperText Transfer Protocol,即是超文本传输协议. 2.浅出概念(使用浏览器访问服务器端网页时需要遵循的一系列规则) Http:将各种不 ...