前言
-
Flutter 作為Google出品的一個(gè)新興的跨平臺(tái)移動(dòng)客戶端UI開發(fā)框架鳖粟，正在被越來越多的開發(fā)者和組織使用，包括阿里的咸魚、騰訊的微信等救湖。
示意圖 在日常開發(fā)中，Android Native端與Flutter端通信交互的應(yīng)用場(chǎng)景十分常用
今天涎才，我將全面講解Android Native端與Flutter端通信的交互的方式鞋既，旨在讓你熟練掌握Android Native端與Flutter端的通信交互，包括：原理耍铜、架構(gòu)邑闺、通信方式等，希望你們會(huì)喜歡棕兼。
示意圖
目錄
示意圖
1. 通信原理
1.1 通信架構(gòu)
Android 與 Flutter之間的通信消息傳遞媒介：平臺(tái)通道（PlantformChannel）
示意圖
平臺(tái)通道（PlantformChannel）主要包括三種：（下面會(huì)詳細(xì)介紹）
- 基本信息通道（BasicMessageChannel）
- 方法通道（MethodChannel）
- 數(shù)據(jù)流通道（EventChannel）
1.2 整體設(shè)計(jì)
示意圖
1.3 詳細(xì)說明
- 數(shù)據(jù)載體：ByteBuffer
- 傳遞媒介：BinaryMessenger陡舅。在Android側(cè)，BinaryMessenger是一個(gè)接口伴挚，在FlutterView中實(shí)現(xiàn)了該接口靶衍，通過JNI來與系統(tǒng)底層通信。在Flutter側(cè)茎芋，BinaryMessenger是一個(gè)類颅眶，該類的作用 = 與類window通信，而類window才真正與系統(tǒng)底層溝通
- 消息傳遞方式：異步
- 線程切換：在系統(tǒng)底層實(shí)現(xiàn)田弥，系統(tǒng)底層屏蔽了線程切換涛酗、數(shù)據(jù)拷貝等大量復(fù)雜操作，使得Android側(cè)與flutter側(cè)能方便通信
更加詳細(xì)的底層原理可參考：咸魚團(tuán)隊(duì)的技術(shù)文章
2. 通信交互方式
2.1 簡(jiǎn)介
Flutter定義了三種類型的通信交互傳遞方式偷厦，對(duì)應(yīng)三種平臺(tái)通道（PlantformChannel） ：
- 基本信息通道（BasicMessageChannel）
- 方法通道（MethodChannel）
- 數(shù)據(jù)流通道（EventChannel）
2.2 設(shè)計(jì)原理
三種通道各有用途商叹，但設(shè)計(jì)上相近，均有三個(gè)重要成員變量：
示意圖
附錄：Flutter定義了兩種Codec：MessageCodec只泼、MethodCodec沈自，介紹如下：
示意圖
2.3 應(yīng)用場(chǎng)景
針對(duì)Flutter給出的三種通道方式，我們對(duì)于Android 與 Flutter相互通信的應(yīng)用場(chǎng)景主要包括：
- 基本信息通道（BasicMessageChannel）：用于傳遞字符串&半結(jié)構(gòu)化的信息
- 方法通道（MethodChannel）：用于傳遞方法調(diào)用（method invocation）
- 數(shù)據(jù)流通道（EventChannel）： 用于數(shù)據(jù)流（event streams）的通信
下面辜妓，我將詳細(xì)講解枯途。
3. 準(zhǔn)備工作
在講解上述三種通道前，我們需要將Flutter集成到當(dāng)前的Android目錄中
步驟1：創(chuàng)建 flutter module 模塊
// 步驟1： cd到Android 工程目錄
// 步驟2：命令行執(zhí)行
flutter create -t module 模塊名稱
// 示例：flutter create -t module flutter_plugin
打開項(xiàng)目工程目錄會(huì)發(fā)現(xiàn)籍滴，F(xiàn)lutter作為Module集成到Android工程中
示意圖
步驟2：添加flutter module模塊到當(dāng)前項(xiàng)目
// 步驟1：在項(xiàng)目根目錄的settings.gradle中添加：
setBinding(new Binding([gradle: this]))
evaluate(new File(
settingsDir.parentFile,
"AndroidxFlutter/flutter_plugin/.android/include_flutter.groovy"
))
// 注：”工程名/flutter模塊名/.android/include_flutter.groovy“
// 步驟2：在app/build.gradle文件中的dependencies添加 flutter依賴
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar'])
implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
......
implementation project(':flutter')
}
// 步驟3：在app/build.gradle文件中的android添加如下代碼
android{
....
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
{
至此酪夷，F(xiàn)lutter已經(jīng)集成到當(dāng)前Android工程項(xiàng)目中
4. 詳解講解（含Demo）
下面，我將手把手帶你們?cè)敿?xì)分析上述三個(gè)通道孽惰，并結(jié)合示例Demo
通道1：基本信息通道（BasicMessageChannel）
作用：傳遞字符串 & 半結(jié)構(gòu)化的信息
步驟1：自定義BasicMessageChannel工具類
（Native端）BasicMessageChannelPlugin.java
- 創(chuàng)建BasicMessageChannel對(duì)象（需傳入FlutterView晚岭、channel name和codec）
- 注冊(cè)Channel對(duì)象處理的Handler
- 定義要發(fā)送到Flutter的消息的函數(shù)
- 接受到Flutter消息時(shí)進(jìn)行回應(yīng)接受的函數(shù)
// 此處以發(fā)送的數(shù)據(jù)類型是String為例
public class BasicMessageChannelPlugin implements BasicMessageChannel.MessageHandler<String> {
private Activity activity;
private BasicMessageChannel<String> messageChannel;
// 步驟1：創(chuàng)建BasicMessageChannelPlugin實(shí)例
static BasicMessageChannelPlugin registerWith(FlutterView flutterView) {
return new BasicMessageChannelPlugin(flutterView);
}
private BasicMessageChannelPlugin(FlutterView flutterView) {
this.activity = (Activity) flutterView.getContext();
// 創(chuàng)建BasicMessageChannel對(duì)象（需傳入FlutterView、channel name和codec）
this.messageChannel = new BasicMessageChannel<String>(flutterView, "BasicMessageChannelPlugin", StringCodec.INSTANCE);
// 注冊(cè)處理的Handler
messageChannel.setMessageHandler(this);
}
// 步驟2：向Flutter發(fā)送消息
// 傳入?yún)?shù)：需發(fā)送的消息 & 回調(diào)處理
void send(String str, BasicMessageChannel.Reply<String> reply) {
messageChannel.send(str, reply);
}
// 步驟3：復(fù)寫回調(diào)函數(shù)：接受到Flutter消息時(shí)進(jìn)行回應(yīng)
@Override
public void onMessage(String s, BasicMessageChannel.Reply<String> reply) {
// s即為Flutter發(fā)送過來的消息
System.out.println("Native：收到了"+s);
// 接受到Flutter信息后勋功，采用reply實(shí)例將返回值返回到Flutter層
reply.reply("Native確認(rèn)了" + s);
}
}
步驟2：定義Flutter要發(fā)送到Native端的消息 & 接受消息的函數(shù)方法坦报，及其對(duì)應(yīng)消息內(nèi)容
（Flutter端）main.dart
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart'; // Material UI組件庫(kù)
import 'dart:ui';
import 'package:flutter/services.dart'; // 引入后可以使用window對(duì)象
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
/// 該方法用于判斷原生界面?zhèn)鬟f過來的路由值库说，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
switch (route) {
case 'flutterView': // 當(dāng)route值為flutterView時(shí)顯示
return FlutterContactPage();
default: // 默認(rèn)的路由值為 '/'，所以在default情況也需返回頁面片择，否則dart會(huì)報(bào)錯(cuò)
return Container(
child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
color: Colors.red,
);
}
}
class FlutterContactPage extends StatelessWidget {
// 注冊(cè)對(duì)應(yīng)的channel潜的，即自定義的BasicMessageChannel
// 注：要保證channel name、codec與原生層一致
BasicMessageChannel<String> _messageChannel =
BasicMessageChannel("BasicMessageChannelPlugin", StringCodec());
@override
Widget build(BuildContext context) {
// 向Native發(fā)送消息
return Scaffold(
appBar: AppBar(
title: Text('Flutter Page'),
),
body: RaisedButton(// 為了展示使用按鈕字管，通過channel傳輸消息出去啰挪，同時(shí)將原生層返回的消息打印出來
onPressed: () {
_messageChannel
.send('Flutter發(fā)起第二次握手') // 發(fā)送的消息
.then((str) { // Native針對(duì)該消息返回的消息
print('Flutter:收到了 $str');
});
},
child: Text('Send Message to Native'),
),
);
// 接受Native發(fā)送過來的消息
_messageChannel.setMessageHandler((message) => Future<String>(() {
print("Flutter：接受到了：" + message); // message即為Native發(fā)送過來的消息
return "Flutter確認(rèn)的"+ message; // Flutter針對(duì)Native發(fā)送的消息進(jìn)行返回
}));
}
}
步驟3：（Native端）連接Native和Flutter的中間層
MainActivity.java
- 創(chuàng)建FlutterView組件
- 創(chuàng)建 & 注冊(cè)MethodChannel
- 發(fā)送到Flutter的消息 & 接受消息的消息內(nèi)容
- 發(fā)起要調(diào)用Flutter端的請(qǐng)求
public class MainActivity extends AppCompatActivity {
private ViewGroup.LayoutParams layoutParams;
private Button btn;
private BasicMessageChannelPlugin mBasicMessageChannelPlugin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 通過Flutter.createView()創(chuàng)建FlutterView組件方式
FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
// 將Flutter視圖添加到原生布局中的Fragment中(為了方便顯示，此處采用按鈕觸發(fā)形式)
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams); // 將flutter添加到布局中
mBasicMessageChannelPlugin = BasicMessageChannelPlugin.registerWith(flutterView); // 關(guān)聯(lián)通道
// 向Flutter發(fā)送消息
mBasicMessageChannelPlugin.send("Native發(fā)起第一次握手",new BasicMessageChannel.Reply<String>(){
@Override
public void reply(String s){
System.out.println("Native：收到了" + s);
}
});
}
});
}
}
示意圖
示意圖
通道2：方法通道（MethodChannel）
作用：傳遞方法調(diào)用（method invocation）嘲叔，即Native與Flutter相互調(diào)用對(duì)方的方法（具備返回值）
步驟1：自定義MethodChannel工具類（Native端）
MethodChannelPlugin.java：
- 創(chuàng)建MethodChannel實(shí)例（傳入channel name）
- 注冊(cè)需處理的對(duì)應(yīng)Handler
- 定義要通知Flutter端調(diào)用的方法
- 接受Flutter端要調(diào)用的方法
public class MethodChannelPlugin implements MethodChannel.MethodCallHandler {
private Activity activity;
private MethodChannel channel;
// 1. 創(chuàng)建MethodChannel實(shí)例（傳入channel name）
public static MethodChannelPlugin registerWith(FlutterView flutterView) {
MethodChannel channel = new MethodChannel(flutterView, "MethodChannelPlugin");
MethodChannelPlugin methodChannelPlugin = new MethodChannelPlugin((Activity) flutterView.getContext(), channel);
channel.setMethodCallHandler(methodChannelPlugin);// 2. 注冊(cè)處理的Handler
return methodChannelPlugin;
}
private MethodChannelPlugin(Activity activity, MethodChannel channel) {
this.activity = activity;
this.channel = channel;
}
// 2. 用于調(diào)用Flutter端方法亡呵，無返回值
// method為需調(diào)用的方法名
public void invokeMethod(String method, Object o) {
channel.invokeMethod(method, o);
}
// 3. 用于調(diào)用Flutter端方法，有返回值
// method為需調(diào)用的方法名硫戈、返回值在result內(nèi)
public void invokeMethod(String method, Object o, MethodChannel.Result result) {
channel.invokeMethod(method, o, result);
}
// 4. 復(fù)寫onMethodCall（）：根據(jù)Flutter的要求晤愧，調(diào)用Native方法
@Override
public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
switch (methodCall.method) {
case "FlutterInvokeFlutter":// Flutter要求Native調(diào)用的方法是FlutterInvokeFlutter
System.out.println("Native收到了Flutter的請(qǐng)求方式是："+methodCall.method);
System.out.println("Native收到了Flutter的請(qǐng)求參數(shù)是："+methodCall.arguments);
result.success("Native收到了Flutter的請(qǐng)求方法：" + methodCall.method);// 給flutter端的返回值
break;
default:
result.notImplemented(); // 若無找到對(duì)應(yīng)的方法名刁卜，則通過該方法返回異常
break;
}
}
}
步驟2：（Flutter端）定義要通知Native調(diào)用的方法 & 接受Native端要調(diào)用的方法
main.dart
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart'; // Material UI組件庫(kù)
import 'dart:ui';
import 'package:flutter/services.dart'; // 引入后可以使用window對(duì)象
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _buildWidgetForNativeRoute(window.defaultRouteName),
// Native傳來的route = window.defaultRouteName
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
// 該方法用于判斷原生界面?zhèn)鬟f過來的路由值，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
switch (route) {
case 'flutterView': // 當(dāng)route值為flutterView時(shí)顯示
return FlutterContactPage();
default: // 默認(rèn)的路由值為 '/'，所以在default情況也需返回頁面赋元，否則dart會(huì)報(bào)錯(cuò)
return Container(
child: Center(
child: Text(
'路由值 = deafult',
style: TextStyle(fontSize: 20.0, color: Colors.black),
)),
color: Colors.red,
);
}
}
class FlutterContactPage extends StatelessWidget {
// 注冊(cè)對(duì)應(yīng)的MethodChannel
// 注：要保證channel name卜壕、codec與原生層一致
MethodChannel _methodChannel = MethodChannel("MethodChannelPlugin");
@override
Widget build(BuildContext context) {
// 1. 根據(jù)Native端的要求廉羔，調(diào)用對(duì)應(yīng)方法
_methodChannel.setMethodCallHandler((handler) => Future<String>(() {
print("Native端要調(diào)用的方法和參數(shù)是：${handler}");
// 監(jiān)聽native發(fā)送的方法名及參數(shù)
switch (handler.method) {
case "AndroidInvokeFlutter": // Native要求Flutter調(diào)用的方法是send（）
_send(handler.method, handler.arguments); //handler.arguments表示native傳遞的方法參數(shù)
break;
}
return "Flutter確認(rèn)消息";
}));
// 2. 通知Native端要調(diào)用哪個(gè)方法
return Scaffold(
appBar: AppBar(
title: Text('Flutter Page'),
),
body: RaisedButton(
// 為了展示所以使用按鈕瞄勾，通過channel告訴Native要調(diào)用哪個(gè)方法
onPressed: () {
_methodChannel
.invokeMethod("FlutterInvokeFlutter", "carsonho") // 參數(shù)1=告訴Native要調(diào)用的方法名，參數(shù)2 = 傳遞的參數(shù)
.then((result) { // invokeMethod().then() 來處理正常結(jié)束的邏輯（獲得返回值）
print('$result');
// 成功：通過result.success 返回值
// 異常：通過 result.error 返回異常信息辛掠，可通過catchError 處理異常
});
},
child: Text('Send Message to Native'),
),
);
}
// 需發(fā)送的方法
void _send(method, arg) {
print('Flutter根據(jù)Native端的要求調(diào)用了方法$method');
print('該方法的參數(shù)是：$arg');
}
}
步驟3：（Native端）連接Native和Flutter的中間層
MainActivity.java
- 創(chuàng)建FlutterView組件
- 創(chuàng)建 & 注冊(cè)MethodChannel
- Native端定義要求Flutter端調(diào)用的方法
- 發(fā)起要調(diào)用Flutter端的請(qǐng)求
public class MainActivity extends AppCompatActivity {
private ViewGroup.LayoutParams layoutParams;
private Button btn;
private MethodChannelPlugin mMethodChannelPlugin;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. 通過Flutter.createView()創(chuàng)建FlutterView組件方式
FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
// 將Flutter視圖添加到原生布局中的Fragment中(為了方便顯示谢谦，此處采用按鈕觸發(fā)形式)
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams); // 將flutter添加到布局中
mMethodChannelPlugin = MethodChannelPlugin.registerWith(flutterView); // 關(guān)聯(lián)通道
// Native告訴Flutter要調(diào)用的方法是send（）
mMethodChannelPlugin.invokeMethod("AndroidInvokeFlutter","carsonho");
}
});
}
}
示意圖
示意圖
通道3：數(shù)據(jù)流通道（EventChannel）
作用：用于數(shù)據(jù)流（event streams）的通信，即：
- 原生層：通過 sink 不斷添加數(shù)據(jù) & 發(fā)送多個(gè)信息到 Flutter 層
- Flutter層：接收到數(shù)據(jù)的變化就會(huì)作出新相應(yīng)的處理萝衩，表現(xiàn)為一個(gè)stream
步驟1：自定義EventChannel工具類（Native端）
EventChannelPlugin.java：
- 創(chuàng)建EventChannel實(shí)例（傳入channel name）
- 定義Native發(fā)送數(shù)據(jù)回挽、停止發(fā)送 & 發(fā)送失敗函數(shù)
- 復(fù)寫Flutter端開始監(jiān)聽時(shí)的回調(diào)函數(shù)onListen（）
- 復(fù)寫Flutter端不再接受監(jiān)聽時(shí)的回調(diào)函數(shù)onCancel（）
public class EventChannelPlugin implements EventChannel.StreamHandler {
private EventChannel.EventSink eventSink;
private Activity activity;
// 1. 創(chuàng)建 & 注冊(cè)EventChannel
static EventChannelPlugin registerWith(FlutterView flutterView) {
EventChannel channel = new EventChannel(flutterView, "EventChannelPlugin");
EventChannelPlugin plugin = new EventChannelPlugin(flutterView);
channel.setStreamHandler(plugin);//設(shè)置對(duì)應(yīng)Handler
return plugin;
}
private EventChannelPlugin(FlutterView flutterView) {
this.activity = (Activity) flutterView.getContext();
}
// Native端開始發(fā)送數(shù)據(jù)
void send(Object params) {
if (eventSink != null) {
eventSink.success(params);
System.out.println("sink success");
}
}
// Native端停止發(fā)送數(shù)據(jù)
void cancel() {
if (eventSink != null) {
eventSink.endOfStream();
}
}
// Native端發(fā)送數(shù)據(jù)失敗
void sendError(String str1, String str2, Object params) {
if (eventSink != null) {
eventSink.error(str1, str2, params);
}
}
// 回調(diào)時(shí)機(jī)：Flutter端開始監(jiān)聽該channel時(shí)
// 說明通道已經(jīng)建立好，Native可以開始發(fā)送數(shù)據(jù)了
// 參數(shù)1 = Flutter端初始化EventChannel時(shí)返回的值猩谊，僅此一次
// 參數(shù)2 = 傳數(shù)據(jù)的載體
@Override
public void onListen(Object o, EventChannel.EventSink eventSink) {
this.eventSink = eventSink; //此處注意時(shí)序千劈，必須得該方法回調(diào)后，Native端才允許發(fā)送數(shù)據(jù)
System.out.println( "onListen()：eventSink = " + eventSink);
}
// Flutter端不再接收數(shù)據(jù)時(shí)回調(diào)
@Override
public void onCancel(Object o) {
System.out.println("onCancel()");
this.eventSink = null;
}
}
步驟2：Flutter要展示的布局（Flutter）
main.dart：
- 設(shè)置展示的布局
- 監(jiān)聽Native什么時(shí)候發(fā)送數(shù)據(jù)
- 設(shè)置正常接受數(shù)據(jù)牌捷、錯(cuò)誤接受數(shù)據(jù)等方法回調(diào)
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart'; // Material UI組件庫(kù)
import 'dart:ui';
import 'dart:async';
import 'package:flutter/services.dart'; // 引入后可以使用window對(duì)象
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _buildWidgetForNativeRoute(window.defaultRouteName),
// Native傳來的route = window.defaultRouteName
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
// 該方法用于判斷原生界面?zhèn)鬟f過來的路由值墙牌，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
switch (route) {
case 'flutterView': // 當(dāng)route值為flutterView時(shí)顯示
return FlutterContactPage();
default: // 默認(rèn)的路由值為 '/'，所以在default情況也需返回頁面暗甥，否則dart會(huì)報(bào)錯(cuò)
return Container(
child: Center(
child: Text(
'路由值 = deafult',
style: TextStyle(fontSize: 20.0, color: Colors.black),
)),
color: Colors.red,
);
}
}
class FlutterContactPage extends StatefulWidget {
@override
_FlutterContactPageState createState() => _FlutterContactPageState();
}
class _FlutterContactPageState extends State<FlutterContactPage> {
// 注冊(cè)對(duì)應(yīng)的MethodChannel
// 注：要保證channel name喜滨、codec與原生層一致
EventChannel _eventChannelPlugin = EventChannel("EventChannelPlugin");
StreamSubscription _streamSubscription;
// 在initState狀態(tài)下設(shè)置監(jiān)聽Native端發(fā)送
@override
void initState() {
_streamSubscription = _eventChannelPlugin
.receiveBroadcastStream() // 對(duì)應(yīng)Native端onListen（）的第一個(gè)參數(shù)，可不傳
.listen(_onToDart, onError: _onToDartError, onDone: _onDone);
// 開啟監(jiān)聽撤防，并分別傳入：
// _onToDart方法：正常接收到Native數(shù)據(jù)時(shí)調(diào)用
// _onToDartError方法：接收Native數(shù)據(jù)異常時(shí)調(diào)用
// _onDone方法：發(fā)送數(shù)據(jù)完成時(shí)調(diào)用
super.initState();
}
// Native端發(fā)送正常數(shù)據(jù)回調(diào)方法虽风，每一次發(fā)送都會(huì)調(diào)用
void _onToDart(message) {
print('正常接收：$message');
}
// Native出錯(cuò)時(shí)回調(diào)方法
void _onToDartError(error) {
print('錯(cuò)誤接收：$error');
}
// 當(dāng)native發(fā)送數(shù)據(jù)完成時(shí)調(diào)用的方法
void _onDone() {
print("消息傳遞完畢");
}
@override
Widget build(BuildContext context) {
// 2. 通知Native端要調(diào)用哪個(gè)方法
return Scaffold(
appBar: AppBar(
title: Text('Flutter Page'),
),
body: RaisedButton(
child: Text('begin counting'),
),
);
}
}
步驟3：連接Native和Flutter的中間層
MainActivity.java：
- 創(chuàng)建FlutterView組件
- 創(chuàng)建 & 注冊(cè)EventChannel
- Native端定義要求Flutter端調(diào)用的方法
- 發(fā)起要調(diào)用Flutter端的請(qǐng)求
public class MainActivity extends AppCompatActivity {
private ViewGroup.LayoutParams layoutParams;
private Button btn;
private EventChannelPlugin mEventChannelPlugin;
private int count;
private Timer mTimer;
private TimerTask mTimertask;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. 通過Flutter.createView()創(chuàng)建FlutterView組件方式
FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
// 2. 關(guān)聯(lián)通道
mEventChannelPlugin = EventChannelPlugin.registerWith(flutterView);
// 3. 將Flutter視圖添加到原生布局中的Fragment中(為了方便顯示，此處采用按鈕觸發(fā)形式)
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams); // 將flutter添加到布局中
// 4. 為了方便展示，采用計(jì)時(shí)器Timer發(fā)送一系列數(shù)據(jù)到Flutter
count = 0;
mTimer = new Timer(true);
mTimertask = new TimerTask() {
public void run() {
// 回到主線程后Native發(fā)送數(shù)據(jù)
Handler mainHandler1 = new Handler(Looper.getMainLooper());
mainHandler1.post(new Runnable() {
@Override
public void run() {
mEventChannelPlugin.send(count++);
}
});
// 數(shù)到5時(shí)停止
while (count == 5) {
// 回到主線程后Native停止發(fā)送數(shù)據(jù)
Handler mainHandler2 = new Handler(Looper.getMainLooper());
mainHandler2.post(new Runnable() {
@Override
public void run() {
mEventChannelPlugin.cancel();
}
});
// 關(guān)閉計(jì)時(shí)器
mTimer.cancel();
mTimer = null;
mTimertask.cancel();
mTimertask = null;
}
}
};
// 開啟計(jì)時(shí)器（發(fā)送數(shù)據(jù)）
mTimer.schedule(mTimertask, 1, 1000);
}
});
}
}
示意圖
示意圖
- 至此辜膝，關(guān)于Android通過三種通道與Flutter通信講解完畢无牵。
- 下面，我再用講解一個(gè)較為基礎(chǔ)的場(chǎng)景：在Android中顯示Flutter界面
5. 基礎(chǔ)場(chǎng)景：在Android中顯示Flutter界面
此處分兩種方式：
- Flutter界面顯示在Activity ：Flutter.createView（）
- Flutter界面顯示在Fragment：使用Flutter.createFragment（）
方式1：顯示在Activity
使用Flutter.createView（）厂抖，步驟如下：
步驟1：Android端設(shè)置好跳轉(zhuǎn) & 顯示邏輯
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ViewGroup.LayoutParams layoutParams;
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 1. 通過Flutter.createView()創(chuàng)建FlutterView組件方式
FlutterView flutterView = Flutter.createView(this, getLifecycle(), "flutterView");
// 參數(shù)說明：
// 參數(shù)1：Activity activity茎毁，Activity實(shí)例
// 參數(shù)2：final Lifecycle lifecycle:，定義具有Android生命周期的對(duì)象
// 參數(shù)3：final String initialRoute:验游，初始化的視圖路由名稱充岛，后續(xù)會(huì)根據(jù)該路由進(jìn)行顯示Flutter視圖
// 2. 將Flutter視圖添加到原生布局中(為了方便顯示保檐，此處采用按鈕觸發(fā)形式)
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
addContentView(flutterView, layoutParams); // 將flutter添加到布局中
}
});
}
}
步驟2：在Flutter端中設(shè)置好要顯示的布局
flutter_plugin / lib / main.dart
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart'; // Material UI組件庫(kù)
import 'dart:ui'; // 引入后可以使用window對(duì)象
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
// 該方法用于判斷原生界面?zhèn)鬟f過來的路由值耕蝉，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
switch (route) {
case 'flutterView': // 當(dāng)route值為flutterView時(shí)顯示
return Container(
child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
color: Colors.green,
);
default: // 默認(rèn)的路由值為 '/'，所以在default情況也需返回頁面夜只，否則dart會(huì)報(bào)錯(cuò)
return Container(
child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
color: Colors.red,
);
}
}
效果圖
示意圖
方式2：顯示在Fragment
使用Flutter.createFragment（）垒在，步驟如下
步驟1：Android端設(shè)置好跳轉(zhuǎn) & 顯示邏輯
MainActivity.java
public class MainActivity extends AppCompatActivity {
private ViewGroup.LayoutParams layoutParams;
private Button btn;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 將Flutter視圖添加到原生布局中的Fragment中(為了方便顯示，此處采用按鈕觸發(fā)形式)
btn = findViewById(R.id.btn);
btn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
getSupportFragmentManager().beginTransaction()
.add(R.id.fragment_container, Flutter.createFragment("flutterView"))
.commit();
btn.setVisibility(View.GONE);
}
});
}
}
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/btn"
android:text="start"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 用于加載 fragment -->
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
步驟2：在Flutter端設(shè)置好布局顯示
flutter_plugin / lib / main.dart
/**
* 導(dǎo)入庫(kù)
**/
import 'package:flutter/material.dart'; // Material UI組件庫(kù)
import 'dart:ui'; // 引入后可以使用window對(duì)象
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: _buildWidgetForNativeRoute(window.defaultRouteName),// Native傳來的route = window.defaultRouteName
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
);
}
}
// 該方法用于判斷原生界面?zhèn)鬟f過來的路由值扔亥，加載不同的頁面
Widget _buildWidgetForNativeRoute(String route) {
switch (route) {
case 'flutterView': // 當(dāng)route值為flutterView時(shí)顯示
return Container(
child: Center(child: Text('路由值 = flutterView',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
color: Colors.green,
);
default: // 默認(rèn)的路由值為 '/'场躯，所以在default情況也需返回頁面，否則dart會(huì)報(bào)錯(cuò)
return Container(
child: Center(child: Text('路由值 = deafult',style: TextStyle(fontSize: 20.0, color: Colors.black),)),
color: Colors.red,
);
}
}
至此旅挤，關(guān)于Android 與 Flutter的相互通信講解完畢踢关。
6. 總結(jié)
- 本文全面介紹了Android Native端與Flutter端的通信方式。
- 接下來推出的文章粘茄，我將繼續(xù)講解Flutter的相關(guān)知識(shí)签舞，包括使用語法、實(shí)戰(zhàn)等柒瓣，感興趣的讀者可以繼續(xù)關(guān)注我的博客哦：Carson_Ho的Android博客
請(qǐng)點(diǎn)贊儒搭！因?yàn)槟銈兊馁澩?鼓勵(lì)是我寫作的最大動(dòng)力！
相關(guān)文章閱讀
Android開發(fā)：最全面芙贫、最易懂的Android屏幕適配解決方案
Android開發(fā)：史上最全的Android消息推送解決方案
Android開發(fā)：最全面搂鲫、最易懂的Webview詳解
Android開發(fā)：JSON簡(jiǎn)介及最全面解析方法!
Android四大組件：Service服務(wù)史上最全面解析
Android四大組件：BroadcastReceiver史上最全面解析
歡迎關(guān)注Carson_Ho的簡(jiǎn)書！
不定期分享關(guān)于安卓開發(fā)的干貨磺平，追求短魂仍、平、快拣挪，但卻不缺深度擦酌。
