Flutter教程開坑篇，由簡至難教你胡辣湯的31種作法...

Flutter = 胡辣湯

寫在開坑以前

18年前我是一名設計師，作FLASH動畫的。當時有一個FLASH編程的入門課程對我影響很大，直接致使了我後來「淪落爲」一名程序員。那個入門課程做者叫ayychina，第一課叫《點不到的按鈕》。在這個課程裏，我掌握了入門任何新UI框架的武功祕籍，記得那會兒還用3.5寸軟盤給我「夢情」作了個點不到的愛心...技術肥宅的浪漫真是很難get到吧...

那個年代的FLASH能夠作出不少酷炫的UI，是當時數一數二的「跨端」技術，固然那會兒的尚未「跨端」這個概念，咱們都被叫作多媒體設計師....直到FLASH犯下幾個致命的錯誤，又被喬幫主判處死刑...

• 不管什麼框架，咱前端用起來不外乎就作幾件事

1. 建立顯示對象，好比button，text，image等等...
2. 弄明白顯示對象的層級關係...容器，層級 3. 設置顯示對象的屬性，寬高大小顏色等等... 4. 顯示對象的事件系統，click，mousemove等等... 5. 繪製/渲染系統...重繪機制等等... 複製代碼

• 在開始以前，咱們先來了解下Flutter的架構和渲染機制

能夠看到Flutter的架構主要分爲三層:Framework，Engine和Embedder。

1.Framework使用dart實現，包括Material Design風格的Widget,Cupertino(針對iOS)風格的Widgets，文本/圖片/按鈕等基礎Widgets，渲染，動畫，手勢等。此部分的核心代碼是:flutter倉庫下的flutter package，以及sky_engine倉庫下的io,async,ui(dart:ui庫提供了Flutter框架和引擎之間的接口)等package。

2.Engine使用C++實現，主要包括:Skia,Dart和Text。Skia是開源的二維圖形庫，提供了適用於多種軟硬件平臺的通用API。

3.Embedder是一個嵌入層，即把Flutter嵌入到各個平臺上去，這裏作的主要工做包括渲染Surface設置,線程設置，以及插件等。從這裏能夠看出，Flutter的平臺相關層很低，平臺(如iOS)只是提供一個畫布，剩餘的全部渲染相關的邏輯都在Flutter內部，這就使得它具備了很好的跨端一致性。

• 從網上摘了一段，也是Flutter標誌本身徹底不一樣於RN類框架或其餘Hybrid跨端框架的核心要素

我試着用一句話講明白flutter爲何能夠跨端+高性能的原理

這貨就是個跨端「遊戲」引擎呀（打了引號）

一塊畫布（SGL），使用Dart語言編寫Framework制定的API，由Framework調用Engine層實現繪製，Embedder層負責跨端運行和渲染。

再想一想那些能跨平臺的遊戲引擎unreal，unity3d，你想一想是否是都是這麼回事呀？

---

建立一個Flutter應用

原理就聊到這裏，回到咱們的課程，快速的讓你們先來上個手《點不到的按鈕》

• 安裝Flutter看這裏：安裝Flutter

1. flutter create myapp
2. 「myapp」是你應用的名稱
3. 完成後用vscode打開這個目錄

先搞清楚在哪裏寫代碼

lib/main.dart就是我們新建的這個應用的入口代碼

先不說別的，run一下（按F5），第一次很慢，以後會快不少

你能夠選擇使用蘋果模擬器或是安卓模擬器來調試

隨便改改代碼試試看調試模式下的熱重載

好比找到這一行代碼
primarySwatch: Colors.blue, 改成 primarySwatch: Colors.red, 保存 複製代碼

此次不須要通過編譯，模擬器裏的UI就實時改變了。因此熱重載是一個很是高效的調試方式。 （這樣的特性還用跟Web前端開發者說嘛？是否是太out了）

回到咱們的課程案例上，需求是

在界面裏放置一個按鈕，按鈕上文字顯示」點我呀「，點擊以後按鈕就跑到另一個座標。這就是點不到的按鈕...其實本來課程裏是mouseover後移動到另外一個座標，但移動端沒有mouseover這個事兒啊...

需求拆解：

step1

在放按鈕以前，咱們須要一個承載按鈕的佈局容器

這個按鈕點了以後要隨機變換位置，因此確定得用自由佈局的組件

查看全部佈局組件

總之看完全部佈局組件的文檔，咱們知道要用到這個組合
Stack，一個能夠隨意堆放子元素的佈局 Positioned，一個絕對定位組件，改變top，left參數就能夠跑來跑去啦 複製代碼

step2

咱們要在這個容器裏放一個按鈕，按鈕上文字顯示」點我呀「

RaisedButton(
 onPressed: (){  },  color: Colors.red,//紅色背景  child:Text(  'click me',//文本內容  style: TextStyle(  color: Colors.white,//文字白色  fontSize: 12//文字字號  )  ) ) 複製代碼

step3

按鈕點擊以後要更改其座標

在實現這個以前，咱們先要了解，在Flutter中萬物皆Widget，而Widget又分無狀態組件（StatelessWidget）和有狀態組件（StatefulWidget）。簡單點說，組件在建立後，是否容許更改狀態，一但狀態更改，其UI就會從新渲染。

這裏顯然咱們要用有狀態組件，接下來的代碼是在組件建立時，就給與按鈕一個隨機屏幕座標，那麼以後只要改變狀態，就會從新渲染

RaisedButton(
 onPressed: (){  setState((){});//關鍵是這一句  },  color: Colors.red,  child:Text(  'click me',  style: TextStyle(  color: Colors.white,  fontSize: 12  )  ) ) 複製代碼

//得到當前設備屏幕尺寸，須要import 'dart:ui'
var s = window.physicalSize/window.devicePixelRatio; //新建一個隨機對象，import 'dart:math'; var rng = new Random(); //隨機生成按鈕的座標 double btnTop = rng.nextDouble()*(s.height-40); double btnLeft = rng.nextDouble()*(s.width-100);  return Container(  color: Colors.white,  child:Stack(  children: [  Positioned(  top: btnTop,  left: btnLeft,  width: 100,  height: 40,  )  )  ]  ) ); 複製代碼

• 那麼本課關鍵代碼就齊全了

源碼下載

• 沒整明白的請前往著名的交友社區查看源碼 github.com/ezshine/flu…

關注大帥搞全棧

---

感謝分享點贊評論三連，跟我一塊兒學作胡辣湯(Flutter)吧~

本文使用 mdnice 排版