php和dart交互,Flutter 之和原生交互
先盗一张图
image.png
我们需要实现的效果
Flutter 传输数据到 Android Native
Flutter 跳转到Android Native界面
Android Native 给 Flutter 传输数据
GIF 2020-7-8 15-56-45.gif
看GIF图
第一项按钮点击跳转到原生Activity 后,点击中间文字会改变测试界面的第三项按钮文字。
第二项点击后是Flutter 传递到原生界面的一个Map数据
我们来看代码实现。
首先Flutter代码
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('测试界面'),
),
body: TestWidget(),
),
));
}
class TestWidget extends StatefulWidget {
@override
State createState() {
return TestState();
}
}
class TestState extends State {
//获取插件与原生Native的交互通道
static const sendToNative = const MethodChannel('com.guoteng.native.receive/plugin');
//具体要做的功能
Future _startToNativeActivity() async {
String result = await sendToNative.invokeMethod('startToEditActivity');
print(result);
}
// 具体要做的功能
Future _sendDataToNative() async {
Map map = {"flutter": "我是flutter 传递过来的"};
String result = await sendToNative.invokeMethod('mapData', map);
print(result);
}
//接收来自本地的消息
static const receiveFromNative = const EventChannel('com.guoteng.native.send/plugin');
StreamSubscription _streamSubscription;
var _currentCount;
@override
void initState() {
super.initState();
//开启监听
if (_streamSubscription == null) {
_streamSubscription = receiveFromNative.receiveBroadcastStream().listen((Object event) {
setState(() {
_currentCount = event;
print("ChannelPage: $event");
});
}, onError: (Object error) {
setState(() {
_currentCount = "计时器异常";
print(error);
});
});
}
}
@override
void dispose() {
super.dispose();
//取消监听
if (_streamSubscription != null) {
_streamSubscription.cancel();
}
}
@override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
RaisedButton(
child: Text('跳转到原生activity'),
onPressed: () {
_startToNativeActivity();
},
),
RaisedButton(
child: Text('让原生接收到数据'),
onPressed: () {
_sendDataToNative();
},
),
RaisedButton(
child: Text('原生传递过来的值$_currentCount'),
onPressed: () {},
)
],
));
}
}
android 端 MainActivity 代码
package com.example.flutterapp
import android.os.Bundle
import io.flutter.app.FlutterActivity //这里注意,使用io.flutter.app下的FlutterActivity
class MainActivity : FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
//获取到自身的Registry
val registry = flutterView.pluginRegistry;
//注册插件
FlutterPluginFtoA.registerWith(registry.registrarFor(FlutterPluginFtoA.A_TO_F_CHANNEL));
FlutterPluginAtoF.registerWith(registry.registrarFor(FlutterPluginAtoF.F_TO_A_CHANNEL));
}
}
package com.example.flutterapp;
import android.app.Activity;
import io.flutter.plugin.common.EventChannel;
import io.flutter.plugin.common.PluginRegistry;
/**
* android 本地代码传数据到Flutter
*/
public class FlutterPluginAtoF implements EventChannel.StreamHandler {
public static final String F_TO_A_CHANNEL = "com.guoteng.native.send/plugin";
private static FlutterPluginAtoF instance;
private EventChannel.EventSink events;
public static FlutterPluginAtoF getInstance() {
return instance;
}
public static void registerWith(PluginRegistry.Registrar registrar) {
EventChannel eventChannel = new EventChannel(registrar.messenger(), F_TO_A_CHANNEL);
instance = new FlutterPluginAtoF();
eventChannel.setStreamHandler(instance);
}
@Override
public void onListen(Object arguments, EventChannel.EventSink events) {
this.events = events;
}
@Override
public void onCancel(Object arguments) {
}
public void sendEventData(Object data){
if(events != null){
events.success(data);
}
}
}
package com.example.flutterapp;
import android.app.Activity;
import android.content.Intent;
import android.widget.Toast;
import androidx.annotation.NonNull;
import io.flutter.plugin.common.MethodCall;
import io.flutter.plugin.common.MethodChannel;
import io.flutter.plugin.common.PluginRegistry;
/**
* 从Flutter传递到本地的插件类
*/
public class FlutterPluginFtoA implements MethodChannel.MethodCallHandler {
//这里要注意和Flutter使用的相同
public static final String A_TO_F_CHANNEL = "com.guoteng.native.receive/plugin";
private Activity handlerActivity;
public FlutterPluginFtoA(Activity activity) {
this.handlerActivity = activity;
}
public static void registerWith(PluginRegistry.Registrar registrar) {
//主要的方法MethodChannel
MethodChannel methodChannel = new MethodChannel(registrar.messenger(), A_TO_F_CHANNEL);
FlutterPluginFtoA instance = new FlutterPluginFtoA(registrar.activity());
methodChannel.setMethodCallHandler(instance);
}
/**
* @param call 回调过来的Flutter 的方法 和 参数
* @param result 通过result 可以返回数据给Flutter
*/
@Override
public void onMethodCall(@NonNull MethodCall call, @NonNull MethodChannel.Result result) {
//和原生交互返回
switch (call.method) {
case "showToast":
//接收Flutter 传递过来的参数
Object arguments = call.arguments;
Toast.makeText(handlerActivity, "收到Flutter传过来的" + arguments, Toast.LENGTH_SHORT).show();
break;
case "startToEditActivity":
//跳转到原生界面
Intent editActivityIntent = new Intent(handlerActivity, EditH5Activity.class);
handlerActivity.startActivity(editActivityIntent);
result.success("startOk");
break;
case "mapData":
//Flutter 传递过来的数据
//解析参数
String text = call.argument("flutter");
Toast.makeText(handlerActivity, "接收: " + text, Toast.LENGTH_SHORT).show();
break;
default:
break;
}
}
}
Flutter 跳转到Native的界面代码
package com.example.flutterapp
import android.app.Activity
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.TextView
class EditH5Activity : Activity() {
private var currentCount = 0;
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_edit_h5)
val tvIntentTxt = findViewById(R.id.tvIntentTxt)
tvIntentTxt.setOnClickListener(View.OnClickListener {
FlutterPluginAtoF.getInstance().sendEventData(""+ currentCount++); //通过这个发送消息到Flutter
})
}
}
php和dart交互,Flutter 之和原生交互相关推荐
- 阿衰java免费版_flutter plugin之路:flutter与原生交互传值OC/java版(一)
说在前头:flutter虽然很牛掰,但是目前很多功能或者插件的实现其实还是需要通过原生来实现,然后通过flutter和原生的交互传值实现数据的交换. -本篇是flutter调用原生方法,然后原生执行完 ...
- flutter和原生交互
一.Flutter中使用Android Studio打开原生文件 选中Android目录--右键--选中flutter---Open for Editing in Android Studio 问题1 ...
- Flutter 与 原生交互(Android),关于Android开发的面试经验总结
接收 */ void receiveMessage(){ messageChannel.setMessageHandler((message) async{ print(message); retur ...
- 包红b2c模块 flutter与原生交互
一.flutter提供的FlutterMethodChanel与原生(ios&android)进行交换 flutter与原生交互图: ios注册flutter调用通道 //oc 注册flutt ...
- Flutter 与 原生交互(Android),安卓移动开发背景换色
*/ public static String CHANNEL = "com.mmd.flutterapp/plugin"; private static String ACTIO ...
- Flutter开发Flutter与原生OC、Java的交互通信-2(48)
我们上一篇主要讲了Flutter与原生OC.Java的交互通信的机制:平台通道 只实现了Flutter 主动调用OC.Java的方向的通信.并没有实现OC.Java端主动调用Flutter的实现.这里 ...
- Flutter开发Flutter与原生OC、Java的交互通信-1(47)
我的文章讲过:(0085)iOS开发之OC与JS交互高级用法(JavaScriptCore) 前言:我们知道OC 在UIWebView 加载 H5中,常常需要OC 与 H5 之间进行交互调用.采取的方 ...
- Flutter与Android原生交互
记录一下小白的学习之路,图片都是走过的坑 文末附demo地址 文章目录 创建project Android端(native) Flutter端 Android调用flutter 创建project 首 ...
- android WebView通过js方法与原生交互
根据WebView里面的链接字符串跳转Activity activityBaseWebAddWebView.setWebViewClient(new WebViewClient() {@Overrid ...
- h5 做app时和原生交互的小常识。
距离上次随笔或许有半年了吧,最近在用hybrid模式开发移动app,所以就简单的说说用h5技术开发app时候,做原生交互的几个小常识: 一.拨打电话或者发送短信: <a href="t ...
最新文章
- AI 场景的价值体现——视觉 AI 技术落地实践
- JAVA并发编程学习笔记------FutureTask
- Java反射最佳实践
- 【数据竞赛】ICCV 2021 竞赛汇总
- 计算机面试数据库基本知识,面试基础知识集合(python、计算机网络、操作系统、数据结构、数据库等杂记)...
- php的create_function、function_exists判断函数是否存在
- html5 web storage攻击,HTML5安全风险详析之二:Web Storage攻击
- 学习Scala:使用try-catch表达式处理异常
- SentinelResource注解配置中_客户自定义限流处理_削峰填谷_流量控制_速率控制_服务熔断_服务降级---微服务升级_SpringCloud Alibaba工作笔记0046
- split(v1,v2)用于把一个字符串分割成字符串数组
- java 留言板_java web实现简单留言板功能
- ContextCaptureMaster/Smart3D 集群简单配置
- SMARTS决策引擎技术白皮书
- InstallShield打包程序
- electron开发客户端注意事项(兼开源个人知识管理工具“想学吗”)
- Linux究竟值多少钱?
- vscode Android调试
- 《软件方法》第8章 分析 之 分析类图(2)
- VSCode用Run code插件配置python环境(win10)
- 9张思维导图学懂Javascript
热门文章
- 图像增强处理之:同态滤波与Retinex算法(一)同态滤波
- leetcode之回文链表
- 简单Java类和数据库操作及javafx的结合小项目(二)
- Ubuntu urllib2.URLError:urlopen error unknown url type:https
- 2017/2/25 学习笔记
- 在mysql中修改表名的sql语句
- zend studio结合xdebug、xdebug-help(chrome插件)调试PHP程序
- easyui小清新俺也晒晒 视频管理软件bs项目
- 【Tensorflow、Keras】关于Reshape层小结(部分问题未解决)
- 【LeetCode】【字符串】题号:*58. 最后一个单词的长度