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

如果我們目前的項(xiàng)目是Android的，但是接下來我們希望部分頁(yè)面可以使用Flutter進(jìn)行開發(fā)，甚至我們希望在Native頁(yè)面中嵌入FlutterUI組件，那么我們?cè)撊绾螌?shí)現(xiàn)呢？

成都創(chuàng)新互聯(lián)于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元月湖做網(wǎng)站,已為上家服務(wù),為月湖各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18980820575

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

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

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

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

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

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

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

注意：需要在 AndroidManifest.xml 注冊(cè) FlutterActivity

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

在 MainActivity 中啟動(dòng) FlutterAppActivity （另外別忘了在 AndroidManifest.xml 中注冊(cè) FlutterAppActivity ）

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

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

擴(kuò)展思考

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

activity_main.xml

FrameLayout 用于承載Flutter組件

MainActivity.java

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

運(yùn)行結(jié)果

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

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

第十六章：Flutter數(shù)據(jù)存儲(chǔ)

Flutter的數(shù)據(jù)存儲(chǔ)分為三類

Preference相當(dāng)于iOS的NSUserDefaults,其實(shí)也是按plist的方式存儲(chǔ)的

step1:添加依賴

step2:pub get

step3:導(dǎo)入頭文件

在path_provider中有三個(gè)獲取文件路徑的方法：

- getTemporaryDirectory()

://獲取應(yīng)用緩存目錄，等同iOS的NSTemporaryDirectory()和Android的getCacheDir() 方法。

- getApplicationDocumentsDirectory():

//獲取應(yīng)用文件目錄類似于iOS的NSDocumentDirectory和Android上的 AppData目錄。

step1:添加依賴

step2:pub get

step3:導(dǎo)入頭文件

Flutter初探--常用依賴包

國(guó)外地址：

國(guó)內(nèi)鏡像：

以 flutter_screenutil 為例

路由框架 annotation_route

狀態(tài)管理 provider

UI適配 flutter_screenutil

刷新控件 flutter_easyrefresh

網(wǎng)絡(luò)請(qǐng)求 dio

toast控件 fluttertoast

圖表庫(kù) charts_flutter

網(wǎng)絡(luò)監(jiān)聽 connectivity

事件總線 event_bus

日歷組件 table_calendar

官方webview webview_flutter

第三方webview flutter_webview_plugin

該篇文章為常用依賴包總結(jié)，用來記錄所需要的常用依賴包，后續(xù)會(huì)不斷擴(kuò)充內(nèi)容~

[Flutter Package]類iOS使用方法的SectionTableView

此控件的package我已經(jīng)托管到了 pub倉(cāng)庫(kù)

如果你被墻住了，也可以看 國(guó)內(nèi)鏡像

使用方式就是在你的flutter pubspec.yaml中添加依賴：

然后flutter packages get更新依賴即可

最近寫demo時(shí)發(fā)現(xiàn)Flutter自帶的ListView widget很簡(jiǎn)陋，沒有分隔線，沒有section/row之分，也沒有sectionHeader，如果要實(shí)現(xiàn)一個(gè)有分割線，有section區(qū)分，有section header的ListView，耦合會(huì)非常嚴(yán)重：

在 上沒有找到封裝好的這種TableView，于是乎決定自己寫一個(gè)，命名為SectionTableView

本人是iOS開發(fā)，所以習(xí)慣了iOS上的UITableView的調(diào)用風(fēng)格，所以在實(shí)現(xiàn)flutter的SectionTableView時(shí)，決定實(shí)現(xiàn)如下功能

為了實(shí)現(xiàn)這些功能，并且方便后期增加滾動(dòng)功能，上下拉刷新功能，使用了StatefulWidget作為父類：

接著在對(duì)應(yīng)的_SectionTableViewState中的build方法中，返回ListView：

熟悉flutter ListView的同學(xué)知道，ListView的builder類方法，有一個(gè)itemBuilder回調(diào)函數(shù)，參數(shù)是當(dāng)前的上下文，和將要渲染的行索引index，index對(duì)應(yīng)想要獲取的某一行控件(cell或者叫ListItem)，返回非空的組件就證明這個(gè)index有值，返回null就表示列表到盡頭了。

我們需要做的就是對(duì)index進(jìn)行映射，判斷當(dāng)前index對(duì)應(yīng)的控件，應(yīng)該是列表里的section header，還是分隔線devider，還是某一行的真正內(nèi)容cell。

出于性能的考慮，不可能每次調(diào)用 _buildCell的時(shí)候，都計(jì)算一遍index對(duì)應(yīng)的section和row的位置，所以定義了一個(gè)類成員變量indexPathSearch，是數(shù)組，數(shù)組長(zhǎng)度就是ListView所有的行，當(dāng) _buildCell 的參數(shù)index大于等于indexPathSearch的長(zhǎng)度的時(shí)候，就返回null，表示列表內(nèi)容到此為止了。

indexPathSearch里每一個(gè)元素，就是index對(duì)應(yīng)的section和row（稱為indexPath），index指向?qū)嶋H行(cell)的時(shí)候，section和row都是大于等于0的，當(dāng)section大于等于0，row==-1的時(shí)候，表示這里是一個(gè)section header，當(dāng)兩者都等于-1的時(shí)候，表示這里是一個(gè)分割線：

計(jì)算好了index到indexPath的映射，剩下的就好說了，在_buildCell中，提取indexPath并判斷indexPath的內(nèi)容，返回對(duì)應(yīng)的控件：

這是我的第一個(gè)flutter package，目前還很簡(jiǎn)陋，flutter目前尚且如此，所以大家一起改善它，

下一步將優(yōu)化如下內(nèi)容：

如果大家喜歡，請(qǐng)多多star我的 項(xiàng)目GitHub

分享名稱：flutter加載依賴,flutter 加載更多
分享地址：http://m.rwnh.cn/article42/dscooec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、企業(yè)網(wǎng)站制作、網(wǎng)站導(dǎo)航、微信公眾號(hào)、ChatGPT、網(wǎng)站設(shè)計(jì)

廣告

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