特別說明
當(dāng)前博客平臺賬號已廢棄，如果有使用細節(jié)問題請前往我新博客平臺進行討論交流。
個人博客平臺 HuRuWo的技術(shù)小站
文章首發(fā)于個人博客HuRuWo的技術(shù)小站,如果本文非vip用戶無法完全瀏覽或者圖片無法打開，可前往個人博客文章地址查看文章并留言討論。
個人博客文章地址跨平臺UI框架Flutter的入門和使用
更多技術(shù)文章訪問本人博客HuRuWo的技術(shù)小站，包括 Electron從零開發(fā) Android 逆向 app 微信數(shù)據(jù)抓取 抖音數(shù)據(jù)抓取 閑魚數(shù)據(jù)抓取 小紅書數(shù)據(jù)抓取 其他軟件爬蟲 等技術(shù)文章
前言
現(xiàn)如今,跨平臺已是大勢所趨。層出不窮的跨平臺方案也在不停地迭代。下面看一下谷歌發(fā)布的跨平臺方案UI框架Flutter。
Flutter的簡介
Flutter是Google用以幫助開發(fā)者在Ios和Android兩個平臺快速開發(fā)高質(zhì)量原生應(yīng)用的全新移動UI框架。
Flutter的時間線
2018年2月27日，在2018世界移動大會上，Google發(fā)布了Flutter的第一個Beta版本。
同時Flutter也作為谷歌下一代移動操作系統(tǒng)Fuchsia的UI庫
在最近的谷歌開發(fā)者大會上，F(xiàn)Lutter已經(jīng)發(fā)布了Release Preview2版本了，預(yù)計年底能出正式版。
相對于其他跨平臺方案的優(yōu)勢
其他跨平臺方案
Flutter的特點和優(yōu)勢
繼承RN的優(yōu)點
- 1.快速開發(fā)
- 2.質(zhì)量有保證,性能足夠
- 3.一次編寫，多平臺共享。
- 4.提升開發(fā)體驗,支持熱重載.(基于Dart語言特性，更迅速)
- 5.方便的與原生橋接
- 6.與web端共享代碼(Dart語言可以在web端運行，也可將Dart轉(zhuǎn)換成js)
改善RN的不足的點:
- 1.使用Dart語言，解決js帶來的各種問題。包括兼容性和運行速度問題。
- 2.雖然Flutter初始包和RN初始包大小差不多(7m左右),但由于語言特性，當(dāng)業(yè)務(wù)代碼足夠多時。Flutter會遠小于RN。
- 3.不使用原生的控件，而是單獨實現(xiàn)gui庫渲染。刷新速度保證在60fps。
- 4.以幀為單位刷新頁面，不會發(fā)生過度繪制等性能問題。
- 5.提供大量的雙平臺控件，保證一套代碼做出兩種風(fēng)格的UI。
Flutter的架構(gòu)
框架整體架構(gòu)
如圖所示
從該架構(gòu)圖可知，F(xiàn)lutter框架可分為Framework層(API層)Engine層(引擎層)
Flutter Framework: 整個框架層都是用Dart語言實現(xiàn)，該層提供一套基礎(chǔ)庫， 用于處理動畫、繪圖和手勢等。并且基于繪圖封裝了一套 UI組件庫，并且細分為兩種風(fēng)格的組件
Flutter Engine: 這是一個純 C++實現(xiàn)的框架層，包含了 Skia引擎（高性能渲染引擎Dart運行環(huán)境、文字排版引擎等。
框架架構(gòu)原理(與RN對比)
RN架構(gòu)
Flutter架構(gòu)
說明:
1.UI繪制上:RN使用JSBridge 繪制原生組件來顯示圖形.而Flutter使用自帶的widget引擎渲
染圖形。
2.與原生通信上:RN使用JSBridge橋接，而Flutter使用平臺通道。
Dart語言簡介
在學(xué)習(xí)使用Flutter之前,必須先了解Dart的使用。總體來說像java和js的結(jié)合，更像kotlin、swift。
Dart語言介紹
Dart是一種強類型、跨平臺的客戶端開發(fā)語言。具有專門為客戶端優(yōu)化、高生產(chǎn)力、快速高效、可移植（兼容ARM/x86）、易學(xué)的OO編程風(fēng)格和原生支持響應(yīng)式編程（Stream & Future）等優(yōu)秀特性。
Dart語言基本概念
所有變量的值都是對象，也就是類的實例。甚至數(shù)字、函數(shù)和null也都是對象，都繼承自O(shè)bject類。(更多對象，而且不需要new關(guān)鍵字)
雖然Dart是強類型語言，但是顯式變量類型聲明是可選的，Dart支持類型推斷。如果不想使用類型推斷，可以用dynamic類型。
Dart支持泛型，List<int>表示包含int類型的列表，List<dynamic>則表示包含任意類型的列表。
Dart支持頂層（top-level）函數(shù)和類成員函數(shù)，也支持嵌套函數(shù)和本地函數(shù)。
Dart支持頂層變量和類成員變量。
Dart沒有public、protected和private這些關(guān)鍵字，使用下劃線“_”開頭的變量或者函數(shù)，表示只在庫內(nèi)可見。
Dart語言特點(為什么谷歌選擇Dart而不是其他語言)
Dart可以跨平臺運行,因為他可以以不同的形式在瀏覽器/ios/android/DartVM上運行。
Dart是AOT（Ahead Of Time）編譯的，編譯成快速、可預(yù)測的本地代碼，使Flutter幾乎都可以使用Dart編寫。Dart也可以JIT（Just In Time）編譯，所以Flutter支持熱重載，開發(fā)周期異常快。
因為Dart編寫的Flutter應(yīng)用程序被編譯為本地代碼，因此它們不需要在領(lǐng)域之間建立緩慢的橋梁（例如，JavaScript到本地代碼）。它的啟動速度也快得多。
Dart使Flutter不需要單獨的聲明式布局語言，如JSX或XML，或單獨的可視化界面構(gòu)建器，因為Dart的聲明式編程布局易于閱讀和可視化。(android 使用 java邏輯+xml布局是無奈之舉，現(xiàn)在改過來了。)
Dart特別容易學(xué)習(xí)，因為它具有靜態(tài)和動態(tài)語言用戶都熟悉的特性。
搭建Flutter開發(fā)環(huán)境
因為ios開發(fā)必須使用macOS，所以我這里只介紹win系統(tǒng)下的環(huán)境搭建具體參考官方文檔
1.設(shè)置鏡像地址
可以更快的獲取Flutter包和相關(guān)資源
在環(huán)境變量里面加入
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.獲取Flutter SDK
網(wǎng)址https://flutter.io/sdk-archive/#windows 選擇想要的版本下載或者直接從倉庫拉取版本
git clone -b master https://github.com/flutter/flutter.git./flutter/bin/flutter --version
3.設(shè)置Flutter的環(huán)境變量
將下載的壓縮包解壓后，配置flutter/bin 目錄到環(huán)境變量path里面
4.安裝平臺所需依賴
ios:macos 系統(tǒng)只需要更新xcode到7.2以上即可進行ios軟件的開發(fā)
android:安裝最新班的AndroidStudio 同時下載必須的AndroidSDK 即可配置完成
5.使用其他工具開發(fā)
Flutter可以在VSCode 、AndroidStudio(最方便)、JIDEA下進行開發(fā)。只需要安裝flutter插件即可
-->搜索 Flutter--->安裝
6.檢查一切是否正常
命令行輸入:flutter doctor
實戰(zhàn)從0開發(fā)Flutter項目
創(chuàng)建一個新的項目
直接使用ide new flutter project 或者使用命令行 flutter create 項目名稱
等待片刻(最好翻墻) 下載相關(guān)依賴后 項目創(chuàng)建完成
連接設(shè)備后 繼續(xù)輸入命令
cd new_app
flutter run
稍等片刻,運行結(jié)果
文件目錄
整個文件目錄分為android 部分 ios部分 和 dart代碼部分
android和ios部分用于放置對應(yīng)平臺代碼
下面是lib下的main.dart文件內(nèi)容，是整個app的啟動入口
Flutter的布局
Flutter的布局思想
Flutter基于widget(組件)的 即萬物皆widget 從大類上來看 所有的控件都繼承與widget這個類。
而在widget類上面,根據(jù)狀態(tài)是否有變化。又分為 StatelessWidget 和 StatefulWidget
Stateless widgets是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.
Stateful widgets持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實現(xiàn)一個 stateful widget 至少需要兩個類:
常用的布局控件介紹
Flutter提供了大量的控件,包括大量類型原生風(fēng)格 包括ios/Andoroid兩個平臺的。
根據(jù)功能分為 功能控件和布局控件
功能控件
負責(zé)顯示 交互 的控件,包括Text Button CheckBox RadioButton EditText等控件。使用方法和在其他平臺下
類似，這里不做詳細介紹。具體參考 https://flutterchina.club/widgets/
布局控件
布局控件用于排列其他控件，都有一個child屬性。根據(jù)child的數(shù)量又分為單子元素布局和多子
元素布局。介紹幾個用的最多的布局控件。
Container 單子元素布局控件---:擁有繪制 定位 調(diào)整大小 的容器
Container 是最常用的容器控件,沒有之一。他的功能太豐富了。只要套上，可以給
任意widget添加這些屬性
屬性:
padding 設(shè)置內(nèi)邊距 margin 設(shè)置外邊距 color 背景顏色 width 寬度 child 子widget
height 高度 alignment 子布局位置 foregroundDecoration 前景描述 transform 旋轉(zhuǎn)
Row/Column 水平/垂直方向的多widget排列容器,相當(dāng)于Android中的LinearLayout 兩種方向
Stack 絕對布局，可以將所有的子布局疊加起來。相當(dāng)于Android中的AbsoluteLayout類比web中的absolute
加載資源文件
加載本地資源
Flutter加載任何本地文件都需要寫入配置文件 pubspec.yaml 的 asset節(jié)點中.下面以圖片文件為例。
介紹整個加載過程
1.創(chuàng)建工程中image文件夾(放在工程哪里沒關(guān)系，叫什么也沒關(guān)系 只要能訪問得到)
2.配置文件加入資源相對路徑。這個相對是相對于整個flutter工程的。 加入到flutter下的asset 節(jié)點下
- 3.代碼中引用即可,就像這樣
其他資源 像字體文件 文本 文件 都加入asset 下即可
引用第三方依賴
除了Flutter內(nèi)置的控件和庫，還有很多其他依賴可以加入。具體可以去 https://pub.dartlang.org/packages 獲得。這里包括官方提供的額外依賴還有其他開發(fā)者提供的依賴。
引入第三方依賴步驟如下(以引入webview為例):
1.https://pub.dartlang.org/packages 上搜索webview 復(fù)制依賴代碼
flutter_webview_plugin: ^0.2.1+2
2.將依賴加入到配置文件下,并啟動包獲取 flutter packages get
3.參考文檔,代碼中引用即可,就像這樣
效果
頁面跳轉(zhuǎn)
當(dāng)應(yīng)用有多個頁面時 需要從一個頁面跳轉(zhuǎn)到另一個頁面。需要用到兩個核心類Router。 route是一個屏幕或頁面的抽象，Navigator是管理route的Widget。Navigator可以通過route入棧和出棧來實現(xiàn)頁面之間的跳轉(zhuǎn)。
1.在頂層聲明路由 指向新的頁面
2.在點擊事件里面 添加跳轉(zhuǎn)邏輯 傳入注冊的
路由值
Navigator可以攜帶參數(shù)和接收參數(shù)。方便頁面間的值傳遞。同時可以配置跳轉(zhuǎn)動畫，元素共享等參數(shù)
頁面返回 使用pop方法: Navigator.of(context).pop('data');
網(wǎng)絡(luò)訪問和數(shù)據(jù)解析
Flutter中的網(wǎng)絡(luò)訪問來自 dart:io ，提供基本的數(shù)據(jù)訪問。由于Dart是單線程，需要配合異步(Future類)使用。
補充:Future(期貨)對象用于執(zhí)行異步操作，允許在將來獲得一個值。一般使用async 和 await可以獲得Future對象。
訪問網(wǎng)絡(luò)整個流程如下:
- 1創(chuàng)建 client.
- 2構(gòu)造 Uri.
- 3發(fā)起請求, 等待請求，同時也可以配置請求headers、 body。
- 4關(guān)閉請求, 等待響應(yīng).
- 5解碼響應(yīng)的內(nèi)容.
取得數(shù)據(jù)后使用使用dart:convert庫可以解碼json數(shù)據(jù)。
解析成map:
Map datas = JsonCodec().decode(data);
總結(jié)與提問
對于企業(yè)
Flutter的出現(xiàn)提供了另外一種跨平臺的方案。直接上框架是比較冒進的，因為無論是框架本身還是市場從業(yè)人員的成熟程度都不夠。但是作為技術(shù)選型的備用選項是非常不錯的選擇。
對于個人開發(fā)者
無論是原生開發(fā)還是前端人員 flutter都是易上手的框架。
如果你想成為大前端開發(fā)者，flutter絕對是值得嘗試的。
