原生与Flutter页面跳转并传递数据

Posted 2021-07-08 Ever69

在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并传递数据的话，希望多多留言或私信，让我长长见识~