关键词：
在App开发中，从一个页面跳转至另一个页面并附带一些参数供下一个页面使用是最为常见的了，那么，在原生与Flutter混合开发的情况下，页面互相跳转并附带参数传递怎么实现呢？
Flutter跳转原生页面并传递数据
Flutter怎么跳转原生页面并附带数据呢？很简单，MethodChannel ，看过我其他博客的童鞋对它应该不陌生，它是Flutter与原生通信的桥梁，我们可以利用它定义专门的跳转方法，实现Flutter跳转原生页面。
举个栗子。
现在我在原生定义一个jumpToNative方法，接受两个参数，第一个参数为跳转页面的标识，我这定义为String类型，第二个为跳转附带的参数，类型可以定义成Map或者String，String的情况下如果传递的数据较多，可以将数据转化为Json字符串传递过去。
方法名称：jumpToNative()
返回值：void
参数：
| 名称 | 类型 | 必要 | Nullable | 说明 |
| flag | String | Y | Y | 跳转标识，用于区分跳转那个页面 |
| data | Map<String,dynamic> | Y | Y | 附带数据 |
原生中进行方法定义
override fun configureFlutterEngine(flutterEngine: FlutterEngine)
super.configureFlutterEngine(flutterEngine)
MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL_NATIVE)
.setMethodCallHandler(object : MethodChannel.MethodCallHandler
override fun onMethodCall(call: MethodCall, result: MethodChannel.Result)
when (call.method)
"jumpToNative" ->
val flag = call.argument<String>("flag")
val data: Map<String, Any>? = call.argument("data")
var intent: Intent? = null
when (flag)
"aaa" ->
intent = Intent(this@MainActivity, SecondActivity::class.java)
data?.let
intent?.putExtra("aa", it["aa"] as Int)
intent?.putExtra("aaa", it["aa"] as String)
"bbb" ->
intent = Intent(this@MainActivity, SecondActivity::class.java)
"xxx" ->
intent = Intent(this@MainActivity, SecondActivity::class.java)
if (intent != null) startActivity(intent)
else -> result.notImplemented()
)
如果不想在这里处理数据的话，可以选择传递Json字符串，直接将Json字符串传递给页面，在页面内进行处理。
flutter调用跳转
void jumpToNative(String flag, Map<String, dynamic> data)
MethodChannelUtil.nativeChannel
.invokeMethod("jumpToNative", 'flag': flag, 'data': data);
如此一来，flutter便可以附带数据跳转原生页面了。
原生跳转Flutter页面并传递数据
原生跳转Flutter页面，可以使用官方为我们封装好的Api进行设置。
Android 中可以使用FlutterActivity、FlutterFragment、FlutterView进行跳转。
ios中可以使用FlutterViewController进行跳转。
具体实现可以查看这里
https://flutter.dev/docs/development/add-to-app
官方文档中对原生如何跳转Flutter页面介绍的很详细，但是如何在跳转的同时附带数据却没有说明（反正我是没找到）。
这就坑爹了，如果不能附带一些必要的数据过去的话，光跳转过去了也没用啊。
思前想后，我把突破口放到了initialRoute()这个方法上，这个方法是用来跳转Flutter页面时指定路由的。这个方法接收一个String类型的参数。所以我就想将我们的数据转成Json字符串通过这个方法传递过去，当然这个Json字符串也要包含原来的路由参数。Flutter内边拿到这个Json字符串后，可以将它转成一个Map，然后从中获取我们传递的数据。
这个方案我试了试，可行~
android代码
val map = HashMap<String,Any>()
map["id"] = 10010
map["type"] = "电信"
map["routeName"] = "/xx"
val json = Gson().toJson(map)
println("------------$json-----------")
withNewEngine()
.initialRoute(json)
.build(this@SecondActivity)flutter代码
Map<String, dynamic> data = json.decode(window.defaultRouteName);
print(data["routeName"]);
print(data["id"]);
print(data["type"]);Flutter_boost
flutter_boost是阿里出的一个框架，旨在更为方便的管理原生与flutter之间的界面跳转。而且它也支持在原生跳转Flutter的时候附带传递数据，这一切都是封装好了，相比我的方案，使用非常简单，不过，它是通过什么方式传递的我还没有看，后面在慢慢研究吧。。
如果有小伙伴知道其他方案可以实现原生跳转Flutter并传递数据的话，希望多多留言或私信，让我长长见识~
flutter跳转并关闭之前的所有页面(重定向)(代码片段)
...p函数就是我想要的效果这里直接贴出代码（需要引入Flutter的基本的库例如import‘package:flutter/material.dart’;）///runApp(页面类);runApp(constIndex()); 查看详情
flutter跳转并关闭之前的所有页面(重定向)(代码片段)
...p函数就是我想要的效果这里直接贴出代码（需要引入Flutter的基本的库例如import‘package:flutter/material.dart’;）///runApp(页面类);runApp(constIndex()); 查看详情
11flutter--路由和导航(代码片段)
...页面跳转发送数据页面跳转返回数据页面跳转基本使用在Flutter中页面的跳转称之为路由，它们由导航器Navigator组件管理。导航器管理一组Route对象，并提供管理堆栈的方法。例如Navigator.push和Navigator.pop。新建一个页面FirstScrren，... 查看详情
flutterflutter混合开发(安卓端向flutter传递数据|flutterfragment数据传递|flutteractivity数据传递)(代码片段)
文章目录前言一、FlutterFragment数据传递二、FlutterActivity数据传递三、相关资源前言在上一篇博客【Flutter】Flutter混合开发(关联Android工程与Flutter工程|安卓页面中嵌入Flutter页面|安卓中启动Flutter页面)中,创建Android工程,并将两个工... 查看详情
vue路由跳转之当前页面路由跳转并动态改变页面的title(代码片段)
改之前： 然后在保证不跳转到其他页面，在本页面中进行路由跳转，实现title的变更 改之后： 在当前页面就实现了title的动态改变。下边是实现的方法：在点击下一步的时候： 动态添加url并且携带自己改的... 查看详情
微信小程序页面传参实现列表中item点击跳转并传参到编辑页面(代码片段)
写在前面常见的需求操作：在一些页面中，我们一般会对后台请求的数据列表中的每项item进行CRUD操作，点击对应的itme，跳转到编辑页面，并显示相应的数据，这涉及到一个很常见的操作：页面传参。... 查看详情
flutter与原生混编(ios)
...项目及配置1，创建ios项目，同时在同一个根目录下创建flutter项目flutter项目使用命令fluttercreate-tmodulexxxflutter项目名如图2，将flutter项目以pod的形式加入ios项目2.1，如果项目之前没有用过pod，则podinit创建podfile如果使用过，直接进... 查看详情
多activity界面跳转并传递数据
1<?xmlversion="1.0"encoding="utf-8"?>2<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"3xmlns:tools="http://schemas.android.com/tools"4android:id="@+id/activity_main"5an 查看详情
flutter通过methodchannel实现flutter与androidios的双向通信(代码片段)
更多文章请查看flutter从入门到精通本文章中的完整代码在这里题记：不到最后时刻，千万别轻言放弃，无论结局成功与否，只要你拼博过，尽力过，一切问心无愧。Flutter与AndroidiOS原生的通信有以下三种方... 查看详情
android与h5交互--点击h5跳转到android原生页面(代码片段)
app开发过程中，利用原生+h5模式来开发是比较常见的下面案例演示的是：原生调起一个H5页面，然后H5点击跳转到原生WebViewActivity页面调用H5，点击H5链接跳转到原生MainActivity页面注意别忘了<!--添加网络权限--&... 查看详情
页面跳转并取到值
记录一下（从A页面跳转到B页面，并将B页面的值取到赋到A页面上显示）先来举一个栗子;)这个是A页面这是B页面通过点击A页面上的添加日志跳转到B页面，并将在B页面上添加的日志内容传到A页面上红色框位置 //这个是放在A页... 查看详情
flutter跳转页面传递参数返回页面带参数
参考技术A点击跳转页面跳转后页面还有另外一种跳转页面跳转接收页面 查看详情
ios---通过openurl实现app之间跳转并传递数据
在IOS中，实现一个应用启动另外一个应用，使用UIApplication的openURL：方法就可实现，这里以test跳到test02为例。（需要先创建这两个工程）注册自定义URL协议（在test中） 首先被启动的应用需要向iPhone注册一个自定义URL协... 查看详情
原生与flutter通信(代码片段)
之前讲过一篇Flutter与原生通信，为大家讲解了Flutter如何调用原生，但是没有介绍原生如何调用Flutter，那么原生如何调用Flutter呢？诶~，还是通过MethodChannel，只不过这次它俩角色互换了一下，之前是... 查看详情
混合开发架构|android工程集成reactnativeflutterreactjs(代码片段)
混合开发架构|Android工程集成ReactNative、Flutter、ReactJs架构设计说明创建安卓原生工程创建Flutter集成嵌入原生工程创建ReactNative解决RN报错问题集成嵌入原生工程RN集成后，启动报错底部导航栏架构设计原生仿招商银行首页原生... 查看详情
flutter与原生混合开发(代码片段)
在说flutter与原生的混合开发之前，先和初学flutter的小伙伴提个建议，建议大家刚开始的时候先在纯flutter的项目上练习flutter的相关技术，等练习的差不多了，再练习flutter与原生的交互。主要原因是：与原... 查看详情
activity跳转并传递
<?xmlversion="1.0"encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.andro 查看详情
flutter跳转原生页面后的穿透问题
参考技术A现象：flutter页面通过present跳转原生页面后，原生页面上的点击会首先响应下面的flutter页面中的内容（比如按钮什么的）。这是flutter框架一直存在的一个bug。在github上有相关的issue。https://github.com/flutter/flutter/issues/35784... 查看详情