歡迎光臨
每天分享高質量文章

Google剛剛釋出的Flutter 1.2,未來前景如何?看看高手怎麼說

導讀:2月27日,在巴塞羅那召開的2019世界行動通訊大會(MWC)上,Google正式釋出了Flutter跨平臺UI框架的1.2版本。Flutter是什麼?優勢在哪裡?基於什麼程式碼實現?本文將為您一一解答。

 

 

作者:亢少軍

來源:華章計算機(ID:hzbook_jsj)

自從2018年春Flutter技術最早在谷歌大會上亮相,到 12月Flutter1.0的正式釋出,再到如今的1.2版本,Flutter這個全新的技術在前端領域曝光越來越多,“Flutter是什麼?優勢在哪裡?基於什麼程式碼實現?未來前景如何?新手入門難嗎?……”帶著這樣的問題小夥伴們想必不在少數。

 

今天我們有請到Flutter技術的高手,國內首本Flutter出版書籍《Flutter技術入門與實戰》作者,捷智雲影片會議系統聯合創始人亢少軍老師為我們講解Flutter技術,帶領大家輕鬆入門!

 

在公眾號後臺回覆Flutter,可獲取完整版PPT下載連結。

 

 

  • Flutter簡介

 

 

  • Flutter製作的精美介面

 

 

  • 渲染引擎Skia

Skia是Google研發的包括圖形、文字、影象、動畫等多方面的圖形引擎,不僅用於Google Chrome瀏覽器,Android系統也採用Skia作為繪圖處理引擎。

 

 

  • Androis iOS Mac Win Linux 一致的UI

 

 

  • Android效果圖

 

 

  • iOS 效果圖

 

 

  • Mac效果圖

 

 

  • Win效果圖

 

 

  • 移動端跨平臺開發技術演進

移動端從Hybird Cordova —> ReactNative —> Flutter 幾個方面詳細的分析了跨平臺開發所使用的技術,如下圖:

 

 

上圖中ReactNative使用了OEM的元件,所以在不同平臺上UI表現很難一致,但Flutter使用自己的一套原生控制元件,就很容易得到一致的體驗。假設你全部使用Material風格的元件,不管是在iOS還是在Android,甚至在Win Mac Linux上展示都是一樣的。

 

  • Flutter商用情況

 

 

  • Flutter動畫官方示例

 

 

  • Flutter系統架構

下麵的圖片是Flutter框架結構圖,對大部分開發者而言,最常用的是Widgets層,也就是UI元件。其中有兩套風格的一個是Material,一個是Cupertino。然後是渲染層Rendering,然後是動畫,繪製,及手勢層。底層是Engine層使用C++語言編寫,保證其效能,其中Skia是它的圖形處理技術,Dart指Dart語言解析,Text指紋理渲染。

 

  • GPU渲染

 

下圖展示了Flutter的繪圖原理,Flutter框架直接使用Skia引擎來渲染,因此能夠控制渲染幀數,從而實現高幀速率。

 

 

  • 狀態控制

下圖展示了Flutter的狀態變化情況,從圖中可以看出,當狀態發生變化時會呼叫build方法使得介面重寫渲染,所以這裡大家需要改變一下思路,想控制介面的變化,可以在元件上編寫一個變數,當需要改變這個介面時,呼叫setState方法改為這個變數即可。

 

 

  • 一切皆為Widget

 

Flutter一切皆為元件,包括佈局控制元件,手勢,動畫等內容。從下圖可以看到Widget主要分為兩大類,StatefulWidget有狀態的及StatelessWidget無狀態的元件。

 

 

  • 佈局思路

 

  • 如何佈局

下圖是Flutter官方的一個示例,首先把介面拆分成按垂直方向拆分成四大塊,垂直使用Column佈局,然後分別實現每一部分內容即可。

  • 第一步:使用圖片Image元件

  • 第二步:使用水平佈局Row新增標題及圖示文字

  • 第三步:使用水平佈局Row新增圖示及文字

  • 第四步:使用文字區域元件新增簡介

 

 

  • 細節拆分

 

下麵兩部分均採用了水平及垂直巢狀佈局。首先從橫向上看採用水平佈局,均分成三塊。第一張圖左側標題部分採用了垂直佈局新增兩行標題。第二圖可以把圖示加文字抽象出一個方法來,採用垂直佈局,傳入圖示及文字內容即可。

 

 

  • Flutter外掛通訊原理

 

下圖是平臺通道的結構概述,使用MethodChannel在上層和底層之間傳遞訊息。MethodChannel就類似一個方法通道的功能,所以MethodChannel的name上下層一定要保持一致,上層呼叫底層的方法,底層處理好後傳回給上層資料。註意這個過程是非同步的,所以一定要採用async/await關鍵字。

 

 

  • H5與Flutter對照

H5和Flutter可以找到很多的相同點,如下圖所示。大致可以這麼類比:

Div —> Container

padding —> Padding

margin —> Margin

同時Flutter採用CSS裡的Flex佈局,非常靈活。

 

免費線上公開課地址:

https://edu.csdn.net/huiyiCourse/detail/953

 

在公眾號後臺回覆Flutter,可獲取完整版PPT下載連結。

 

延伸閱讀《Flutter技術入門與實戰》

 

推薦語:由亢少軍老師編寫的國內首本Flutter相關書籍,《Flutter技術入門與實戰》現已上線!從實戰角度講解Flutter,從基礎元件到綜合案例,從工具使用到外掛開發,包含大量精選案例和詳細實操步驟,還有配套影片課程可幫助讀者快速入門。

贊(0)

分享創造快樂