建站
咨詢
售后
建站咨詢
新聞中心
Flutter（六）Android與Flutter混合開發(fā)（Hybird）
如果我們目前的項目是Android的，但是接下來我們希望部分頁面可以使用Flutter進行開發(fā)，甚至我們希望在Native頁面中嵌入FlutterUI組件，那么我們該如何實現(xiàn)呢？
成都創(chuàng)新互聯(lián)公司基于分布式IDC數(shù)據(jù)中心構建的平臺為眾多戶提供成都服務器托管 四川大帶寬租用 成都機柜租用 成都服務器租用。
假設你現(xiàn)在Android項目的目錄的結構是這樣的
這時候如果你想創(chuàng)建一個Flutter模塊，使得Android模塊和Flutter模塊之間可以進行交互，我們可以通過Android Studio新建一個Flutter Module，具體過程是：File — New — New Module ，之后選擇Flutter Module，指定Project Location的路徑為
也就是說，最終你的項目結構會是這樣的
接下來在Android Module的 build.gradle 文件中添加flutter依賴
先創(chuàng)建一個Flutter頁面
這里比較重要的是 window.defaultRouteName 這個字段，這個字段可以接收從Native傳遞過來的參數(shù) （下文我們會介紹原生傳遞參數(shù)的方法），也就是說通過這個字段我們就可以進行Flutter頁面的路由的分發(fā)
我們可以直接在Android的 MainActivity 中啟動一個 FlutterActivity ，這里的 initialRoute 方法中傳遞的參數(shù)就對應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)用，如果使用復寫 FlutterActivity 的方式更有利于我們在 FlutterActivity 中注冊我們的Native插件，所以實際開發(fā)中一般推薦使用第二種方式
擴展思考
initialRoute 從名稱上看起來是Flutter提供給我們進行Native與Flutter交互的路由跳轉的，但是實際上他就是一個字符串，我們不僅僅可以傳遞一個路由名稱，有時候我們也可以通過這個參數(shù)傳遞一串JSON數(shù)據(jù)，然后在Flutter端進行解析，這樣我們就可以通過這個參數(shù)做更多的事情
activity_main.xml
FrameLayout 用于承載Flutter組件
MainActivity.java
使用 FragmentManager 將 FlutterFragment 添加到 FrameLayout 容器中
運行結果
上半部分是原生的TextView，下半部分是Flutter的Text組件
本節(jié)主要介紹了Native和Flutter之間的頁面跳轉，以及同一個頁面中Native與Flutter組件的組合。接下來會介紹如何編寫Android插件與Flutter進行數(shù)據(jù)交互
Flutter自定義繪制組件
Flutter中自定義組件一般有兩種方式：
CustomPaint繼承自SingleChildRenderObjectWidget，即它可以在通過嵌套引入到widget樹中，并且可以有一個child子widget。它的構造方法如下：
painter和foregroundPainter需要接收CustomPainter對象，是CustomPaint核心。CustomPainter是進行UI繪制的核心類，繪制時, CustomPaint 首先在畫布上調(diào)用 painter繪制 , 然后再繪制它的 child Widget, child 繪制完成后再調(diào)用 foregroundPainter 進行繪制。
size屬性標識繪制區(qū)域大小，但當CustomPaint有child，該屬性將會忽略，而使用child的大小為繪制區(qū)域大小。
isComplex和willChange用于控制繪制層緩存處理的，這里暫不討論。
可實現(xiàn)CustomPainter子類進行UI繪制
實現(xiàn)paint方法進行真正的繪制，canvas是畫布對象，size是繪制區(qū)域，是從CustomPaint中size屬性傳遞得到的。繪制過程與Android原生開發(fā)十分類似，連API都十分相像，這點對熟悉Android原生開發(fā)者真是太友好了。
Paint對象是畫筆對象，就是繪圖工具，我們可以設置畫筆的顏色、粗細、是否抗鋸齒、筆觸形狀以及作畫風格等，通過這些屬性我們可以很方便的來定制自己的UI效果，在繪制的過程中可以定義多個畫筆，以便實現(xiàn)多種風格圖形的集合。
根據(jù)需求選擇合適的畫筆屬性，完成你的繪制。
Canvas是繪制的畫布，它包含了很多繪制方法，可以繪制出各種形狀的圖形。需要注意的是，畫布是應用所有控件都在使用的, 所以通過這個畫布其實是可以繪制充滿屏幕的內(nèi)容的，每次繪制都應該限制在本控件的區(qū)域(Size)內(nèi), 以免繪制覆蓋到其他組件。
下面介紹下Canvas的繪制方法：
PointMode是個枚舉
p1、p2為線段兩個端點
Rect定義矩形的大小位置，有多種構造方式:
RRect描述圓角矩形，他通過Rect和Radius來構造
畫圓比較簡單，c表示圓心位置，radius是半徑。
橢圓使用外接矩形確定大小位置，rect就是外接矩形。
繪制弧形，先確定弧形對應的橢圓，同樣地用外接矩形rect確定橢圓，然后根據(jù)起始點和結束點角度來確定那一段弧度，startAngle，sweepAngle分別代表起始和結束點角度，角度用弧度表示法。
useCenter表示是否連接閉合形狀，userCenter = false表示不閉合，即畫一段弧線，userCenter = true表示閉合，即繪制一個扇形。
繪制路徑，關鍵在于構建路徑Path，可以直接new Path對象，然后通過path方法可以連接出圖形，path關鍵方法如下：
還有其他方法，有興趣可以查看API。
Flutter（二）StatefulWidget基礎組件
MaterialApp 是我們app開發(fā)中常用的符合MaterialApp Design設計理念的入口Widget。MaterialApp這個組件里面的參數(shù)比較多，而且一般在應用入口會用到，所以這里把它內(nèi)部的所有參數(shù)都列出來了
基本用法：
可以看到我們在 App 的最外層直接使用了 MaterialApp ，可以指定App的名稱（ title ），App的主題樣式（ theme ），首頁的組件（ home ），路由跳轉配置）（ routes ），關于路由跳轉我們在后面的章節(jié)中會介紹
Scaffold 實現(xiàn)了基本的 Material Design 布局結構， Scaffold 在英文中的解釋為角手架，我們可以理解為樓體中的鋼架結構，通過它可以構建一個頁面
在Flutter應用開發(fā)中，我們可以將 Scaffold 理解為一個布局的容器。可以在這個容器中繪制我們的用戶界面
下面是 MaterialApp + Scaffold 的組合的基本用法
AppBar 就是頂部的導航欄組件，支持自定義標題，左右兩側的工具欄按鈕等
BottomNavigationBar 是底部的菜單欄組件
使用方法：
一般我們會定義一個全局變量如 _currentIndex 用于記錄當前選中的下標。然后在 onTap 屬性的回調(diào)方法中調(diào)用
setState(() { _currentIndex = index;}); 更新 _currentIndex 就可以實現(xiàn)底部菜單的切換。 BottomNavigationBar 一般會配合 BottomNavigationBarItem 一起使用（如下所示）
RefreshIndicator 是Flutter中的下拉刷新組件，一般配合 ListView 組件一起使用
Image 就類似于android中的 ImageView ，可以自定義圖片顯示的寬高
從網(wǎng)絡中加載圖片
從本地（File文件）加載圖片
從本地資源加載圖片
可以將byte數(shù)組加載成圖片
TextField 就類似于android的 EditText
PageView 就類似于android中的 ViewPager
flutter常用組件
主要是關注decoration (裝飾) 可以設置container的屬性，這里color指的是背景色
alertdialog會返回一個結果，這樣可以通過switch或其他方法做多次彈框等其他操作
分享標題：flutter合并組件,flutter子組件重復渲染
URL網(wǎng)址：http://fisionsoft.com.cn/article/dsshsho.html
