前言

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

Flutter的簡介

Flutter是Google用以幫助開發(fā)者在Ios和Android兩個平臺快速開發(fā)高質量原生應用的全新移動UI框架。

---

Flutter的時間線

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

image.png

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

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

相對于其他跨平臺方案的優(yōu)勢

其他跨平臺方案

image.png

Flutter的特點和優(yōu)勢

繼承RN的優(yōu)點

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

改善RN的不足的點:

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

Flutter的架構

框架整體架構

如圖所示

image.png

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

Flutter Framework: 整個框架層都是用Dart語言實現(xiàn)，該層提供一套基礎庫， 用于處理動畫、繪圖和手勢等。并且基于繪圖封裝了一套 UI組件庫，并且細分為兩種風格的組件

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

框架架構原理(與RN對比)

RN架構

image.png

Flutter架構

image.png

說明:

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

Dart語言簡介

在學習使用Flutter之前,必須先了解Dart的使用?？傮w來說像java和js的結合，更像kotlin、swift。

Dart語言介紹

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

Dart語言基本概念

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

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

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

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

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

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

Dart語言特點(為什么谷歌選擇Dart而不是其他語言)

• Dart可以跨平臺運行,因為他可以以不同的形式在瀏覽器/ios/android/DartVM上運行。

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

因為Dart編寫的Flutter應用程序被編譯為本地代碼，因此它們不需要在領域之間建立緩慢的橋梁（例如，JavaScript到本地代碼）。它的啟動速度也快得多。

• Dart使Flutter不需要單獨的聲明式布局語言，如JSX或XML，或單獨的可視化界面構建器，因為Dart的聲明式編程布局易于閱讀和可視化。(android 使用 java邏輯+xml布局是無奈之舉，現(xiàn)在改過來了。)

• Dart特別容易學習，因為它具有靜態(tài)和動態(tài)語言用戶都熟悉的特性。

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

因為ios開發(fā)必須使用macOS，所以我這里只介紹win系統(tǒng)下的環(huán)境搭建具體參考官方文檔

1.設置鏡像地址

可以更快的獲取Flutter包和相關資源
在環(huán)境變量里面加入
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

image.png

2.獲取Flutter SDK

網址https://flutter.io/sdk-archive/#windows 選擇想要的版本下載或者直接從倉庫拉取版本

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

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

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

image.png

4.安裝平臺所需依賴

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

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

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

以VsCode為例: 點擊 image.png
-->搜索 Flutter--->安裝

6.檢查一切是否正常

命令行輸入:flutter doctor

image.png

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

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

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

image.png

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

cd new_app flutter run

稍等片刻,運行結果

jieg

文件目錄

image.png

整個文件目錄分為android 部分 ios部分 和 dart代碼部分
android和ios部分用于放置對應平臺代碼
下面是lib下的main.dart文件內容，是整個app的啟動入口

image.png

Flutter的布局

Flutter的布局思想

Flutter基于widget(組件)的 即萬物皆widget 從大類上來看 所有的控件都繼承與widget這個類。

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

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

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

常用的布局控件介紹

Flutter提供了大量的控件,包括大量類型原生風格 包括ios/Andoroid兩個平臺的。

根據功能分為 功能控件和布局控件

功能控件

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

布局控件

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

Container 單子元素布局控件---:擁有繪制 定位 調整大小 的容器
Container 是最常用的容器控件,沒有之一。他的功能太豐富了。只要套上，可以給
任意widget添加這些屬性
屬性:
padding 設置內邊距margin 設置外邊距 color 背景顏色 width 寬度 child 子widget
height 高度 alignment 子布局位置 foregroundDecoration 前景描述 transform 旋轉

Row/Column水平/垂直方向的多widget排列容器,相當于Android中的LinearLayout 兩種方向

Stack 絕對布局，可以將所有的子布局疊加起來。相當于Android中的AbsoluteLayout類比web中的absolute

加載資源文件

加載本地資源

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

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

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

image.png

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

image.png

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

引用第三方依賴

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

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

flutter_webview_plugin: ^0.2.1+2 

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

image.png image.png

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

image.png

效果

image.png

頁面跳轉

當應用有多個頁面時 需要從一個頁面跳轉到另一個頁面。需要用到兩個核心類Router。 route是一個屏幕或頁面的抽象，Navigator是管理route的Widget。Navigator可以通過route入棧和出棧來實現(xiàn)頁面之間的跳轉。

image.png

1.在頂層聲明路由 指向新的頁面

2.在點擊事件里面 添加跳轉邏輯 傳入注冊的
路由值

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

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

網絡訪問和數(shù)據解析

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

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

訪問網絡整個流程如下:

• 1創(chuàng)建 client.
• 2構造 Uri.
• 3發(fā)起請求, 等待請求，同時也可以配置請求headers、 body。
• 4關閉請求, 等待響應.
• 5解碼響應的內容.

image.png

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

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

image.png

總結與提問

對于企業(yè)

Flutter的出現(xiàn)提供了另外一種跨平臺的方案。直接上框架是比較冒進的，因為無論是框架本身還是市場從業(yè)人員的成熟程度都不夠。但是作為技術選型的備用選項是非常不錯的選擇。

對于個人開發(fā)者

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

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯(lián)系，并提供相關證據，工作人員會在5工作日內聯(lián)系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://jstctz.cn/18400.html