flutter跳轉(zhuǎn)原生頁面后的穿透問題

現(xiàn)象：

創(chuàng)新互聯(lián)建站成立于2013年，我們提供高端成都網(wǎng)站建設(shè)、重慶網(wǎng)站制作、成都網(wǎng)站設(shè)計、網(wǎng)站定制、成都全網(wǎng)營銷推廣、成都小程序開發(fā)、微信公眾號開發(fā)、成都網(wǎng)站營銷服務(wù)，提供專業(yè)營銷思路、內(nèi)容策劃、視覺設(shè)計、程序開發(fā)來完成項目落地，為門窗定制企業(yè)提供源源不斷的流量和訂單咨詢。

flutter頁面通過present跳轉(zhuǎn)原生頁面后，原生頁面上的點擊會首先響應(yīng)下面的flutter頁面中的內(nèi)容（比如按鈕什么的）。

這是flutter框架一直存在的一個bug。在github上有相關(guān)的issue。

原因推測：

推測是flutter對控制器（或者view）加了分類，重寫了控制器的點擊事件，用來計算是否在對應(yīng)的點擊位置有flutter響應(yīng)事件。沒有的話再扔出去點擊事件。

解決方案1：

在原生控制器中，加入點擊事件的幾個方法的空實現(xiàn)，用以覆蓋flutter框架中的實現(xiàn)：

-(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跳轉(zhuǎn)到原生頁面之前，在flutter中加上一個蒙層，用來隔絕手勢往flutter下面的view傳遞。原生頁面返回flutter時再移除這個蒙層。

Flutter（六）Android與Flutter混合開發(fā)（Hybird）

如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現(xiàn)呢？

假設(shè)你現(xiàn)在Android項目的目錄的結(jié)構(gòu)是這樣的

這時候如果你想創(chuàng)建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為

也就是說，最終你的項目結(jié)構(gòu)會是這樣的

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

先創(chuàng)建一個Flutter頁面

這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數(shù) （下文我們會介紹原生傳遞參數(shù)的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發(fā)

我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對應(yīng)Flutter層的 window.defaultRouteName

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

自己創(chuàng)建一個 FlutterAppActivity 繼承自 FlutterActivity

在 MainActivity 中啟動 FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊 FlutterAppActivity ）

兩種啟動方式的區(qū)別

如果單純只是想打開一個Flutter頁面，兩種方式實際上基本沒有太大區(qū)別，第一種方式也許還會更簡單一點。但是，在Flutter開發(fā)中，我們往往還需要開發(fā)一些Native插件供Flutter調(diào)用，如果使用復(fù)寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發(fā)中一般推薦使用第二種方式

擴展思考

initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉(zhuǎn)的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進行解析，這樣我們就可以通過這個參數(shù)做更多的事情

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

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

運行結(jié)果

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

本節(jié)主要介紹了Native和Flutter之間的頁面跳轉(zhuǎn)，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數(shù)據(jù)交互

微信內(nèi)喚起app(flutter)

本功能基于flutter平臺實現(xiàn), 但是方法同樣適用原生客戶端, 區(qū)別只在于flutter端是通過sdk發(fā)送消息至原生來實現(xiàn).

基于Universal Links實現(xiàn), 不受微信控制, 此處不細說, 官網(wǎng)照做就行

依賴庫:

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

蘋果因為是系統(tǒng)級別的跳轉(zhuǎn), 所以沒有這些邏輯

以上完成, 雙端均可在 瀏覽器 和 微信 直接喚起app并跳轉(zhuǎn)到指定頁面

附上一張安卓端效果圖:

Flutter跳轉(zhuǎn)到原生iOS、Android頁面

：之所以讓AppDelegate繼承于UINavigationControllerDelegate，并實現(xiàn)navigationController：willShow方法， ，所以實現(xiàn)代理方法對導(dǎo)航欄的顯示做了判斷。

JumpTestViewController.swift 為：

JumpChannel.kt :

SecondActivity.kt :

在AndroidManifest.xml的application中注冊SecondActivity：

在res文件夾下創(chuàng)建一個layout文件夾，并添加activity_second.xml文件：

Demo： flutter_jumpto_native

Android原生和Flutter使用過程的差異對比（一）

1、界面搭建過程中各種大小單位

Android：通常采用dp設(shè)置View寬高（和px像素的換算關(guān)系是dp值 × density邏輯密度），sp設(shè)置字體大小（會隨著系統(tǒng)字體設(shè)置的大小而改變）。

Flutter：沒有具體的大小單位描述， 和尺寸相關(guān)的MediaQueryData類中較為重要的幾個值如下：

（一）devicePixelRatio（設(shè)備像素比），對應(yīng)Android中的density

（二）size.width和height，設(shè)備的邏輯像素寬高，并非絕對物理像素（例如iphone6的設(shè)備像素比是2，通過size獲取到的邏輯像素寬高為375 ?×? 667，實際物理像素則為750 × 1334，即分辨率）

（三）textScaleFactor：單位邏輯像素字體像素數(shù)，默認(rèn)為1，設(shè)置成1.5則字體變大50%，如果想讓Text組件的字體大小不隨系統(tǒng)設(shè)置的變化而變化，需將這個值設(shè)定成固定值1

UI適配解決方案：

1、采用ScreenUtil插件，初始化時候傳入設(shè)計稿大小，當(dāng)發(fā)現(xiàn)一屏顯示的大小有差異時候采用插件提供的setWidth和setHeight來設(shè)置具體的寬高（會根據(jù)設(shè)計稿大小和實際設(shè)備邏輯像素寬高比進行縮放）。

2、TextButton、Text等按鈕和文本組件，通過設(shè)置字體大小和內(nèi)邊距來控制整體的寬高，而非固定其寬高。

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

Android：圖片通常存放在res/mipmap或res/drawable下，不同分辨率對應(yīng)不同后綴名，如mipmap-hdpi、mipmap-xhdpi

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

如果只配置父級目錄例如（assets/images/common_status）則無法再存放不同尺寸的圖片。不同尺寸的圖片需建立對應(yīng)的2.0x、3.0x目錄后存放，設(shè)備在讀取時候會自行根據(jù)分辨率去找對應(yīng)的圖片，弊端是每有一張圖片就需在pubspec.yaml文件中聲明這些圖片

Android & Flutter 相互跳轉(zhuǎn)

本文中native和flutter的跳轉(zhuǎn)是借助于咸魚的FlutterBoost和ARouter框架實現(xiàn)的。

Sync Now...

flutterBoost中需要給每個頁面定義一個router_path,然后根據(jù)router_path找到對應(yīng)頁面再跳轉(zhuǎn)。

在Application的onCreate中初始化

android jump to flutter

flutter jump to android

分享題目：原生跳轉(zhuǎn)flutter,原生跳轉(zhuǎn)h5需要經(jīng)過服務(wù)器嗎
當(dāng)前鏈接：http://chinadenli.net/article14/dsggcde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計、網(wǎng)站制作、網(wǎng)站維護、做網(wǎng)站、標(biāo)簽優(yōu)化、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)