前言

現(xiàn)如今,跨平臺(tái)已是大勢(shì)所趨。層出不窮的跨平臺(tái)方案也在不停地迭代。下面看一下谷歌發(fā)布的跨平臺(tái)方案UI框架Flutter。

Flutter的簡(jiǎn)介

Flutter是Google用以幫助開發(fā)者在Ios和Android兩個(gè)平臺(tái)快速開發(fā)高質(zhì)量原生應(yīng)用的全新移動(dòng)UI框架。

---

Flutter的時(shí)間線

2018年2月27日，在2018世界移動(dòng)大會(huì)上，Google發(fā)布了Flutter的第一個(gè)Beta版本。

image.png

同時(shí)Flutter也作為谷歌下一代移動(dòng)操作系統(tǒng)Fuchsia的UI庫(kù)

在最近的谷歌開發(fā)者大會(huì)上，F(xiàn)Lutter已經(jīng)發(fā)布了Release Preview2版本了，預(yù)計(jì)年底能出正式版。

相對(duì)于其他跨平臺(tái)方案的優(yōu)勢(shì)

其他跨平臺(tái)方案

image.png

Flutter的特點(diǎn)和優(yōu)勢(shì)

繼承RN的優(yōu)點(diǎn)

• 1.快速開發(fā)
• 2.質(zhì)量有保證,性能足夠
• 3.一次編寫，多平臺(tái)共享。
• 4.提升開發(fā)體驗(yàn),支持熱重載.(基于Dart語(yǔ)言特性，更迅速)
• 5.方便的與原生橋接
• 6.與web端共享代碼(Dart語(yǔ)言可以在web端運(yùn)行，也可將Dart轉(zhuǎn)換成js)

改善RN的不足的點(diǎn):

• 1.使用Dart語(yǔ)言，解決js帶來(lái)的各種問題。包括兼容性和運(yùn)行速度問題。
• 2.雖然Flutter初始包和RN初始包大小差不多(7m左右),但由于語(yǔ)言特性，當(dāng)業(yè)務(wù)代碼足夠多時(shí)。Flutter會(huì)遠(yuǎn)小于RN。
• 3.不使用原生的控件，而是單獨(dú)實(shí)現(xiàn)gui庫(kù)渲染。刷新速度保證在60fps。
• 4.以幀為單位刷新頁(yè)面，不會(huì)發(fā)生過(guò)度繪制等性能問題。
• 5.提供大量的雙平臺(tái)控件，保證一套代碼做出兩種風(fēng)格的UI。

Flutter的架構(gòu)

框架整體架構(gòu)

如圖所示

image.png

從該架構(gòu)圖可知，F(xiàn)lutter框架可分為Framework層(API層)Engine層(引擎層)

Flutter Framework: 整個(gè)框架層都是用Dart語(yǔ)言實(shí)現(xiàn)，該層提供一套基礎(chǔ)庫(kù)， 用于處理動(dòng)畫、繪圖和手勢(shì)等。并且基于繪圖封裝了一套 UI組件庫(kù)，并且細(xì)分為兩種風(fēng)格的組件

Flutter Engine: 這是一個(gè)純 C++實(shí)現(xiàn)的框架層，包含了 Skia引擎（高性能渲染引擎Dart運(yùn)行環(huán)境、文字排版引擎等。

框架架構(gòu)原理(與RN對(duì)比)

RN架構(gòu)

image.png

Flutter架構(gòu)

image.png

說(shuō)明:

1.UI繪制上:RN使用JSBridge 繪制原生組件來(lái)顯示圖形.而Flutter使用自帶的widget引擎渲
染圖形。
2.與原生通信上:RN使用JSBridge橋接，而Flutter使用平臺(tái)通道。

Dart語(yǔ)言簡(jiǎn)介

在學(xué)習(xí)使用Flutter之前,必須先了解Dart的使用。總體來(lái)說(shuō)像java和js的結(jié)合，更像kotlin、swift。

Dart語(yǔ)言介紹

Dart是一種強(qiáng)類型、跨平臺(tái)的客戶端開發(fā)語(yǔ)言。具有專門為客戶端優(yōu)化、高生產(chǎn)力、快速高效、可移植（兼容ARM/x86）、易學(xué)的OO編程風(fēng)格和原生支持響應(yīng)式編程（Stream & Future）等優(yōu)秀特性。

Dart語(yǔ)言基本概念

• 所有變量的值都是對(duì)象，也就是類的實(shí)例。甚至數(shù)字、函數(shù)和null也都是對(duì)象，都繼承自O(shè)bject類。(更多對(duì)象，而且不需要new關(guān)鍵字)

• 雖然Dart是強(qiáng)類型語(yǔ)言，但是顯式變量類型聲明是可選的，Dart支持類型推斷。如果不想使用類型推斷，可以用dynamic類型。

• Dart支持泛型，List<int>表示包含int類型的列表，List<dynamic>則表示包含任意類型的列表。

• Dart支持頂層（top-level）函數(shù)和類成員函數(shù)，也支持嵌套函數(shù)和本地函數(shù)。

• Dart支持頂層變量和類成員變量。

• Dart沒有public、protected和private這些關(guān)鍵字，使用下劃線“_”開頭的變量或者函數(shù)，表示只在庫(kù)內(nèi)可見。

Dart語(yǔ)言特點(diǎn)(為什么谷歌選擇Dart而不是其他語(yǔ)言)

• Dart可以跨平臺(tái)運(yùn)行,因?yàn)樗梢砸圆煌男问皆跒g覽器/ios/android/DartVM上運(yùn)行。

• Dart是AOT（Ahead Of Time）編譯的，編譯成快速、可預(yù)測(cè)的本地代碼，使Flutter幾乎都可以使用Dart編寫。Dart也可以JIT（Just In Time）編譯，所以Flutter支持熱重載，開發(fā)周期異常快。

因?yàn)镈art編寫的Flutter應(yīng)用程序被編譯為本地代碼，因此它們不需要在領(lǐng)域之間建立緩慢的橋梁（例如，JavaScript到本地代碼）。它的啟動(dòng)速度也快得多。

• Dart使Flutter不需要單獨(dú)的聲明式布局語(yǔ)言，如JSX或XML，或單獨(dú)的可視化界面構(gòu)建器，因?yàn)镈art的聲明式編程布局易于閱讀和可視化。(android 使用 java邏輯+xml布局是無(wú)奈之舉，現(xiàn)在改過(guò)來(lái)了。)

• Dart特別容易學(xué)習(xí)，因?yàn)樗哂徐o態(tài)和動(dòng)態(tài)語(yǔ)言用戶都熟悉的特性。

搭建Flutter開發(fā)環(huán)境

因?yàn)閕os開發(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

image.png

2.獲取Flutter SDK

網(wǎng)址https://flutter.io/sdk-archive/#windows 選擇想要的版本下載或者直接從倉(cāng)庫(kù)拉取版本

git clone -b master https://github.com/flutter/flutter.git./flutter/bin/flutter --version 

3.設(shè)置Flutter的環(huán)境變量

將下載的壓縮包解壓后，配置flutter/bin 目錄到環(huán)境變量path里面

image.png

4.安裝平臺(tái)所需依賴

ios:macos 系統(tǒng)只需要更新xcode到7.2以上即可進(jìn)行ios軟件的開發(fā)
android:安裝最新班的AndroidStudio 同時(shí)下載必須的AndroidSDK 即可配置完成

5.使用其他工具開發(fā)

Flutter可以在VSCode 、AndroidStudio(最方便)、JIDEA下進(jìn)行開發(fā)。只需要安裝flutter插件即可

以VsCode為例: 點(diǎn)擊 image.png
-->搜索 Flutter--->安裝

6.檢查一切是否正常

命令行輸入:flutter doctor

image.png

實(shí)戰(zhàn)從0開發(fā)Flutter項(xiàng)目

創(chuàng)建一個(gè)新的項(xiàng)目

直接使用ide new flutter project 或者使用命令行 flutter create 項(xiàng)目名稱
等待片刻(最好翻墻) 下載相關(guān)依賴后 項(xiàng)目創(chuàng)建完成

image.png

連接設(shè)備后 繼續(xù)輸入命令

cd new_app flutter run

稍等片刻,運(yùn)行結(jié)果

jieg

文件目錄

image.png

整個(gè)文件目錄分為android 部分 ios部分 和 dart代碼部分
android和ios部分用于放置對(duì)應(yīng)平臺(tái)代碼
下面是lib下的main.dart文件內(nèi)容，是整個(gè)app的啟動(dòng)入口

image.png

Flutter的布局

Flutter的布局思想

Flutter基于widget(組件)的 即萬(wàn)物皆widget 從大類上來(lái)看 所有的控件都繼承與widget這個(gè)類。

而在widget類上面,根據(jù)狀態(tài)是否有變化。又分為 StatelessWidget 和 StatefulWidget

Stateless widgets是不可變的, 這意味著它們的屬性不能改變 - 所有的值都是最終的.

Stateful widgets持有的狀態(tài)可能在widget生命周期中發(fā)生變化. 實(shí)現(xiàn)一個(gè) stateful widget 至少需要兩個(gè)類:

常用的布局控件介紹

Flutter提供了大量的控件,包括大量類型原生風(fēng)格 包括ios/Andoroid兩個(gè)平臺(tái)的。

根據(jù)功能分為 功能控件和布局控件

功能控件

負(fù)責(zé)顯示 交互 的控件,包括Text Button CheckBox RadioButton EditText等控件。使用方法和在其他平臺(tái)下
類似，這里不做詳細(xì)介紹。具體參考 https://flutterchina.club/widgets/

布局控件

布局控件用于排列其他控件，都有一個(gè)child屬性。根據(jù)child的數(shù)量又分為單子元素布局和多子
元素布局。介紹幾個(gè)用的最多的布局控件。

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 絕對(duì)布局，可以將所有的子布局疊加起來(lái)。相當(dāng)于Android中的AbsoluteLayout類比web中的absolute

加載資源文件

加載本地資源

Flutter加載任何本地文件都需要寫入配置文件 pubspec.yaml 的 asset節(jié)點(diǎn)中.下面以圖片文件為例。
介紹整個(gè)加載過(guò)程

• 1.創(chuàng)建工程中image文件夾(放在工程哪里沒關(guān)系，叫什么也沒關(guān)系 只要能訪問得到)

• 2.配置文件加入資源相對(duì)路徑。這個(gè)相對(duì)是相對(duì)于整個(gè)flutter工程的。 加入到flutter下的asset 節(jié)點(diǎn)下

image.png

• 3.代碼中引用即可,就像這樣

image.png

其他資源 像字體文件 文本 文件 都加入asset 下即可

引用第三方依賴

除了Flutter內(nèi)置的控件和庫(kù)，還有很多其他依賴可以加入。具體可以去 https://pub.dartlang.org/packages 獲得。這里包括官方提供的額外依賴還有其他開發(fā)者提供的依賴。
引入第三方依賴步驟如下(以引入webview為例):

1.https://pub.dartlang.org/packages 上搜索webview 復(fù)制依賴代碼

flutter_webview_plugin: ^0.2.1+2 

2.將依賴加入到配置文件下,并啟動(dòng)包獲取 flutter packages get

image.png image.png

3.參考文檔,代碼中引用即可,就像這樣

image.png

效果

image.png

頁(yè)面跳轉(zhuǎn)

當(dāng)應(yīng)用有多個(gè)頁(yè)面時(shí) 需要從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面。需要用到兩個(gè)核心類Router。 route是一個(gè)屏幕或頁(yè)面的抽象，Navigator是管理route的Widget。Navigator可以通過(guò)route入棧和出棧來(lái)實(shí)現(xiàn)頁(yè)面之間的跳轉(zhuǎn)。

image.png

1.在頂層聲明路由 指向新的頁(yè)面

2.在點(diǎn)擊事件里面 添加跳轉(zhuǎn)邏輯 傳入注冊(cè)的
路由值

Navigator可以攜帶參數(shù)和接收參數(shù)。方便頁(yè)面間的值傳遞。同時(shí)可以配置跳轉(zhuǎn)動(dòng)畫，元素共享等參數(shù)

頁(yè)面返回 使用pop方法:Navigator.of(context).pop('data');

網(wǎng)絡(luò)訪問和數(shù)據(jù)解析

Flutter中的網(wǎng)絡(luò)訪問來(lái)自 dart:io ，提供基本的數(shù)據(jù)訪問。由于Dart是單線程，需要配合異步(Future類)使用。

補(bǔ)充:Future(期貨)對(duì)象用于執(zhí)行異步操作，允許在將來(lái)獲得一個(gè)值。一般使用async 和 await可以獲得Future對(duì)象。

訪問網(wǎng)絡(luò)整個(gè)流程如下:

• 1創(chuàng)建 client.
• 2構(gòu)造 Uri.
• 3發(fā)起請(qǐng)求, 等待請(qǐng)求，同時(shí)也可以配置請(qǐng)求headers、 body。
• 4關(guān)閉請(qǐng)求, 等待響應(yīng).
• 5解碼響應(yīng)的內(nèi)容.

image.png

取得數(shù)據(jù)后使用使用dart:convert庫(kù)可以解碼json數(shù)據(jù)。
解析成map:

 Map datas = JsonCodec().decode(data); 

image.png

總結(jié)與提問

對(duì)于企業(yè)

Flutter的出現(xiàn)提供了另外一種跨平臺(tái)的方案。直接上框架是比較冒進(jìn)的，因?yàn)闊o(wú)論是框架本身還是市場(chǎng)從業(yè)人員的成熟程度都不夠。但是作為技術(shù)選型的備用選項(xiàng)是非常不錯(cuò)的選擇。

對(duì)于個(gè)人開發(fā)者

無(wú)論是原生開發(fā)還是前端人員 flutter都是易上手的框架。
如果你想成為大前端開發(fā)者，flutter絕對(duì)是值得嘗試的。

本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://caipiao93.cn/18400.html