原生跳转flutter,原生跳转h5需要经过服务器吗

flutter跳转原生页面后的穿透问题

现象：

flutter页面通过present跳转原生页面后，原生页面上的点击会首先响应下面的flutter页面中的内容（比如按钮什么的）。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测：

推测是flutter对控制器（或者view）加了分类，重写了控制器的点击事件，用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1：

在原生控制器中，加入点击事件的几个方法的空实现，用以覆盖flutter框架中的实现：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2：

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3：

在flutter跳转到原生页面之前，在flutter中加上一个蒙层，用来隔绝手势往flutter下面的view传递。原生页面返回flutter时再移除这个蒙层。

相关问答

Q1: Flutter（六）Android与Flutter混合开发（Hybird）

如果我们目前的项目是Android的，但是接下来我们希望部分页面可以使用Flutter进行开发，甚至我们希望在Native页面中嵌入FlutterUI组件，那么我们该如何实现呢？

假设你现在Android项目的目录的结构是这样的

这时候如果你想创建一个Flutter模块，使得Android模块和Flutter模块之间可以进行交互，我们可以通过Android Studio新建一个Flutter Module，具体过程是：File — New — New Module ，之后选择Flutter Module，指定Project Location的路径为

也就是说，最终你的项目结构会是这样的

接下来在Android Module的 build.gradle 文件中添加flutter依赖

先创建一个Flutter页面

这里比较重要的是 window.defaultRouteName 这个字段，这个字段可以接收从Native传递过来的参数 （下文我们会介绍原生传递参数的方法），也就是说通过这个字段我们就可以进行Flutter页面的路由的分发

我们可以直接在Android的 MainActivity 中启动一个 FlutterActivity ，这里的 initialRoute 方法中传递的参数就对应Flutter层的 window.defaultRouteName

注意：需要在 AndroidManifest.xml 注册 FlutterActivity

自己创建一个 FlutterAppActivity 继承自 FlutterActivity

在 MainActivity 中启动 FlutterAppActivity （另外别忘了在 AndroidManifest.xml 中注册 FlutterAppActivity ）

两种启动方式的区别

如果单纯只是想打开一个Flutter页面，两种方式实际上基本没有太大区别，第一种方式也许还会更简单一点。但是，在Flutter开发中，我们往往还需要开发一些Native插件供Flutter调用，如果使用复写 FlutterActivity 的方式更有利于我们在 FlutterActivity 中注册我们的Native插件，所以实际开发中一般推荐使用第二种方式

扩展思考

initialRoute 从名称上看起来是Flutter提供给我们进行Native与Flutter交互的路由跳转的，但是实际上他就是一个字符串，我们不仅仅可以传递一个路由名称，有时候我们也可以通过这个参数传递一串JSON数据，然后在Flutter端进行解析，这样我们就可以通过这个参数做更多的事情

activity_main.xml

FrameLayout 用于承载Flutter组件

MainActivity.java

使用 FragmentManager 将 FlutterFragment 添加到 FrameLayout 容器中

运行结果

上半部分是原生的TextView，下半部分是Flutter的Text组件

本节主要介绍了Native和Flutter之间的页面跳转，以及同一个页面中Native与Flutter组件的组合。接下来会介绍如何编写Android插件与Flutter进行数据交互

Q2: 微信内唤起app(flutter)

本功能基于flutter平台实现, 但是方法同样适用原生客户端, 区别只在于flutter端是通过sdk发送消息至原生来实现.

基于Universal Links实现, 不受微信控制, 此处不细说, 官网照做就行

依赖库:

iOS的Universal Links和安卓的Deeplink均会走下面的方法

苹果因为是系统级别的跳转, 所以没有这些逻辑

以上完成, 双端均可在 浏览器 和 微信 直接唤起app并跳转到指定页面

附上一张安卓端效果图:

Q3: Flutter跳转到原生iOS、Android页面

：之所以让AppDelegate继承于UINavigationControllerDelegate，并实现navigationController：willShow方法， ，所以实现代理方法对导航栏的显示做了判断。

JumpTestViewController.swift 为：

JumpChannel.kt :

SecondActivity.kt :

在AndroidManifest.xml的application中注册SecondActivity：

在res文件夹下创建一个layout文件夹，并添加activity_second.xml文件：

Demo： flutter_jumpto_native

Q4: Android原生和Flutter使用过程的差异对比（一）

1、界面搭建过程中各种大小单位

Android：通常采用dp设置View宽高（和px像素的换算关系是dp值 × density逻辑密度），sp设置字体大小（会随着系统字体设置的大小而改变）。

Flutter：没有具体的大小单位描述， 和尺寸相关的MediaQueryData类中较为重要的几个值如下：

（一）devicePixelRatio（设备像素比），对应Android中的density

（二）size.width和height，设备的逻辑像素宽高，并非绝对物理像素（例如iphone6的设备像素比是2，通过size获取到的逻辑像素宽高为375  ×  667，实际物理像素则为750 × 1334，即分辨率）

（三）textScaleFactor：单位逻辑像素字体像素数，默认为1，设置成1.5则字体变大50%，如果想让Text组件的字体大小不随系统设置的变化而变化，需将这个值设定成固定值1

UI适配解决方案：

1、采用ScreenUtil插件，初始化时候传入设计稿大小，当发现一屏显示的大小有差异时候采用插件提供的setWidth和setHeight来设置具体的宽高（会根据设计稿大小和实际设备逻辑像素宽高比进行缩放）。

2、TextButton、Text等按钮和文本组件，通过设置字体大小和内边距来控制整体的宽高，而非固定其宽高。

2、本地资源文件的引用方式

Android：图片通常存放在res/mipmap或res/drawable下，不同分辨率对应不同后缀名，如mipmap-hdpi、mipmap-xhdpi

Flutter：需在pubspec.yaml中配置，如下图所示

如果只配置父级目录例如（assets/images/common_status）则无法再存放不同尺寸的图片。不同尺寸的图片需建立对应的2.0x、3.0x目录后存放，设备在读取时候会自行根据分辨率去找对应的图片，弊端是每有一张图片就需在pubspec.yaml文件中声明这些图片

Q5: Android & Flutter 相互跳转

本文中native和flutter的跳转是借助于咸鱼的FlutterBoost和ARouter框架实现的。

Sync Now...

flutterBoost中需要给每个页面定义一个router_path,然后根据router_path找到对应页面再跳转。

在Application的onCreate中初始化

android jump to flutter

flutter jump to android