90分鐘入門Flutter技術直播分析(架構分析+佈局拆分技巧+外掛原理)

2019年2月26號晚8點第一次做直播，給各位想學習Flutter技術的小夥伴分享了一場Flutter入門的技術。 直播中用到的資料我已經上傳到github上了，請點選這裡： github.com/kangshaojun…

直播回看地址: edu.csdn.net/course/deta…

Flutter100交流群: 894109159

開場白

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關鍵字。

外掛免費課程

想學習的小夥伴請開啟如下地址： ke.qq.com/course/3916…

H5與Flutter對照

H5和Flutter可以找到很多的相同點，如下圖所示。大致可以這麼類比: Div ---> Container padding ---> Padding margin ---> Margin 同時Flutter採用CSS裡的Flex佈局，非常靈活。

實戰課程

想學習的小夥伴請開啟如下地址： ke.qq.com/course/3789…