摘要：是谷歌的移動框架，可以快速在和上構建高質量的原生用戶界面。在全世界好了這些，大家早就知道了，來點實在的話說隔壁師兄，閑魚是最早一批與谷歌展開合作，并在重要的商品詳情頁中使用技術上線的。一切皆來自的組件皆來自。是狀態不可變的稱為無狀態。

要說2018年最火的跨端技術，當屬于 Flutter 莫屬，應該沒人質疑吧。一個新的技術的趨勢，最明顯的特征，就是它一定想把“前浪”拍死在沙灘上。這個前浪，就是"react Native","weex"。目前隨便在搜索引擎上 搜索"Flutter reactNative",就全是這兩個技術的對比，評測。

是的，錯過了react Native, weex 這些 “炸” 翻前端的技術，不能在錯過 Flutter 了，這年頭，你不會一門，跨端技術，怎么好意思說自己是【前端】。

Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構建高質量的原生用戶界面。 Flutter可以與現有的代碼一起工作。在全世界... ...

話說隔壁師兄，“閑魚” 是最早一批與谷歌展開合作，并在重要的商品詳情頁中使用flutter技術上線的BU。一路走來，積累了大量的開發經驗。“閑魚” flutter 相關文章的都很有深度，足見功力。

深入理解Flutter引擎線程模式

Android Flutter實踐內存初探

深入理解flutter的編譯原理與優化

... ...

好了，回到標題，筆者作為一名傳統 web前端，想從前端最熟悉的視角 “躺” 著把 Flutter 了解一遍，不要敬仰，平視它！！！先從興趣開始。

Flutter 環境的搭建，其實有很多資源可以參考。這里就不累述了（知道有很多坑，在后續文章中,有機會把個人遇到的坑匯總一下 ）。

有興趣可以參考 flutter安裝環境的搭建 , 在這里建議各位，一定要自己親自搭一下環境，跑一下官方demo, 小馬過河，焉知深淺，自己定的位才是最準確的。

有了環境，先配置編輯器。

然后 創建一個Flutter項目。

項目創建完成，可以先用 flutter run 跑一下。

flutter run 

好了，跑起來了吧，你會看到一個計數的官方示例，點擊加號圖片可以做加運算。

這時候我們看項目的project 目錄里 有一個入口文件叫 main.dart。然后打開 main.dart 就像下面這樣:

( 為什么你們看到代碼比我的長，因為我折疊了!!! ) 這不是重點，重點是每個類繼承的都是一個尾號為Widget 的字符。

聰明的你一定會覺得 Widget 和 Flutter 有著某種神秘的聯系。

“Binggo！"，是的，Flutter 有兩個重型武器，一個叫 Dart ,另一個就是 Widget 了。

關于強大的Dart,今天暫且不表,后面有時間可以獨立篇幅來聊聊Dart。

先祭出一張 Flutter 的架構老圖。

在 Flutter 的世界里，包括views，view controllers，layouts等在內的概念都建立在Widget之上。

Widget 是 Flutter 組件的抽象描述。所以掌握Flutter的基礎就是學會使用 Widget開始。

在Flutter界面渲染過程分為三個階段：布局、繪制、合成，布局和繪制在Flutter框架中完成，合成則交由引擎負責：

它包含的最主要的幾個類有：

class WidgetsFlutterBinding extends BindingBase with GestureBinding, ServicesBinding, SchedulerBinding,PaintingBinding, RendererBinding, WidgetsBinding { ... }

abstract class Widget extends DiagnosticableTree { ... }
abstract class StatelessWidget extends Widget { ... }
abstract class StatefulWidget extends Widget { ... }
abstract class RenderObjectWidget extends Widget { ... }
abstract class Element extends DiagnosticableTree implements BuildContext { ... }
abstract class RenderObjectElement extends Element { ... }

class StatelessElement extends ComponentElement { ... }
class StatefulElement extends ComponentElement { ... }

上面這些類的主要作用如下:

基于Flutter控件系統開發的程序都需要使用WidgetsFlutterBinding，它是Flutter的控件框架和Flutter引擎的膠水層。

Widget就是所有控件的基類，它本身所有的屬性都是只讀的。

RenderObjectWidget所有的實現類則負責提供配置信息并創建具體的RenderObjectElement。

Element是Flutter用來分離控件樹和真正的渲染對象的中間層，控件用來描述對應的element屬性，控件重建后可能會復用同一個element。

RenderObjectElement持有真正負責布局、繪制和碰撞測試（hit test）的RenderObject對象。

StatelessWidget和StatefulWidget并不會直接影響RenderObject創建，只負責創建對應的RenderObjectWidget

StatelessElement和StatefulElement也是類似的功能。

Widget = 樣式(css) + 標記語義(標簽) + 組件化(官方) + 數據綁定(props)

“什么？這不就是 react 嗎？"

對， React 的概念和 Flutter 的 Widget 是有相通性的。

“既然有react的概念,難道還有state,setState嗎？“

又對, Flutter 還真有 類似 state 狀態機制的概念，而且也確實有 setState 的方法。

“dome里有兩個基類,StatelessWidget 和 StatefulWidget 是做什么用的？”

StatelessWidget 和 StatefulWidget,這里兩個類特別重要,幾乎所有的組件都是基于他們創建的。
StatelessWidget 是狀態不可變的widget,稱為 無狀態widget。初始狀態設置以后就不可再變化。如果需要變化需要重新創建。
StatefulWidget 可以保存自己的狀態,稱為 有狀態widget。Flutter 首先保存了初始化時創建的State,狀態是通過改變State,來重新構建 Widget 樹來進行UI變化。改變狀態的方法，就是我們用的最多的神器"setState"，而單純改變數據是不會引發UI改變的，這個概念和我們的 React 一樣一樣的。

為什么不稱為 “模版”,“標簽”,“element" ，而叫"標記語義"，是因為flutter的 widget 結構并不只是 “模版”，“標簽”，“element"。widget 描述結構更像是 React 的虛擬dom階段，濃縮了相關上下文，以對象化的結構展示。

我們先來看看，React 創建出來的虛擬dom結構( 偽代碼 ):

var newTree = el("div", {"id": "container"}, [
    el("h1", {style: "color: red"}, ["simple virtal dom"]),
    el("p", ["Hello, virtual-dom"]),
    el("ul", [el("li"), el("li")])
])

再來看看,flutter 用Dart 創建的 widget 代碼結構：

Widget build(BuildContext context) {
    return new Column(
      children: [
        new Container(
          padding: new EdgeInsets.only(top:100.0),
          child: new Text("這是一個組件")
        ),
        new Container(
          decoration: new BoxDecoration(border: new Border.all(width:1.0,color: Colors.blue)),
          padding: new EdgeInsets.all(20.0),
          child: new Text("來自輸入框:"+active)
        )
      ],
    );
  }

是不是這樣看就熟悉很多了。

注:很多前端er 會不習慣這中書寫方式，目前有開發者在社區推動，在編譯前，使用jsx標簽，編譯后再解析成標記樹,比如這個DSX設計的提案。

雖然jsx->標記樹 還只是提案，但其實可以幫助我們更容易理解,此提案想表達的樣式像這樣：

class MyScaffold extends StatelessWidget {
  build(context) {
    return 
      
          }
          />
          
            
              
            
          
      
    ;
  }
}

上面這段 jsx 要是用 Dart 來寫是什么樣的？如下:

class MyScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Column(
        children: [
          MyAppBar(
            title: Text(
              "Example title",
               style: Theme.of(context).primaryTextTheme.title,
            ), // Text
          ), // MyAppBar
          Expanded(
            child: Center(
              child: Text("Hello, world!"),
            ), // Center
          ), // Expanded
        ], // []
      ), // Column
    ); // Material
  }
}

雖然 Flutter 與 react 這么類比多少有些牽強，但可以個人總結一些方法，方便理解：

開頭大寫的類名 相當于 jsx 的標簽名

child 相當于 jsx 的 子標簽+布局

children 相當于 jsx 的 群組子標簽（和child還是有區別的)

其他屬性相當于 jsx 的 props

大家有沒有注意, 第二段dart 語法結尾都會帶上 “ // ” 注釋符號，這個是編輯器IDE在識別是 Flutter 項目后，自動追加上去的，像 jsx 語言的標簽封閉，方便發現標注的起始節點。

對于 Flutter 樣式的理解,可以查看官方的這篇文檔，也是同樣用類比的方式，很直觀的了解，HTML、css樣式和 flutter 之間的聯系.
可以參考這里：
https://flutter.io/docs/get-s...
https://flutterchina.club/web...

筆者摘選其中樣例的重點部分，對比展示來說明( 由于篇幅問題, 父子關系css 結構，用tab方式來表示 ):

.demo1 {
      background-color: #e0e0e0;
      width: 320px;
      height: 240px;
      font: 900 24px Georgia;
      letter-spacing: 4px; 
      text-transform: uppercase; 
    }

var demo1 = new Container( 
  child: new Text(
    "Lorem ipsum".toUpperCase(), // 對應 左邊的文本轉換大小寫
    style: new TextStyle( // 對應 左邊的 font
      fontSize: 24.0
      fontWeight: FontWeight.w900,
      fontFamily: "Georgia",
      letterSpacing: 4.0, 
    ),
  ),
  width: 320.0,  // 對應 左邊的 width
  height: 240.0,  // 對應 左邊的 height
  color: Colors.grey[300],  // 對應 左邊的 background-color
);

.demo2 {
      display: flex;
      align-items: center;
      justify-content: center; 
    }

var demo2 = new Container(
  child:  new Center( // 對應左邊的整個 flex 屬性
    child:  new Text("Lorem ipsum"）
   )
  );
);

   
  .container{
   width:300px
   .demo3 {
      width: 100%;
      max-width: 240px; 
   }
  }

// 對于嵌套容器，如果父級的寬度小于子級寬度，則子級容器將自行調整大小以匹配父級。
var container = new Container(
   child: new Center(
        child: new Text("Lorem ipsum"),
        decoration: new BoxDecoration( ... ), // constraints屬性,創建一個新的BoxConstraints來設置minWidth或maxWidth
        width: 240.0, // 對應左邊的 max-width
    ),
   width:300.0
  ),

   
 .box {
       transform: rotate(15deg); 
 }

var container = new Container( // gray box
    child:  new Transform( // 對應左邊的 transform
      child:  new Container(  ... ),
      alignment: Alignment.center, // 對應左邊的 transform
      transform: new Matrix4.identity() // 對應左邊的 transform
        ..rotateZ(15 * 3.1415927 / 180),
    ), 
  )
);

.box {
      transform: scale(1.5); 
}

var container = new Container( // gray box
    child:  new Transform( // 對應左邊的 transform
      child:  new Container(  ... ),
      alignment: Alignment.center, // 對應左邊的 transform的中心
      transform: new Matrix4.identity() // 對應左邊的 transform
        ..scale(1.5),
    ), 
  )
);

.greybox {
      position: relative; 
     .redbox {
       position: absolute;
       top: 24px;
       left: 24px; 
     }
}

var container = new Container( // grey box
  child: new Stack( // 相對跟容器位置 relative
    children: [
      new Positioned( // 相對父容器位置 absolute
        child:  new Container( ... ),
        left: 24.0,
        top: 24.0,
      )],
  )
);

.redbox {
  background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); 
}

var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text( ... ),
      decoration: new BoxDecoration( 
        gradient: new LinearGradient( // 對應左邊的 background: linear-gradient
          begin: const Alignment(0.0, -1.0),
          end: const Alignment(0.0, 0.6),
          colors: [
            const Color(0xffef5350),
            const Color(0x00ef5350)
          ],
        ),
      )
    ),
  )
);

.box {
  border-radius: 8px; 
}

var container = new Container( // grey box
  child: new Center(
    child: new Container( // red circle
      child: new Text( ... ),
      decoration: new BoxDecoration(
        borderRadius: new BorderRadius.all(
          const Radius.circular(8.0),
        ), 
      )
    ),
  )
);

.box {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
              0 6px 20px rgba(0, 0, 0, 0.5);
}

var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child: new Text( ... ),
      decoration: new BoxDecoration(
        boxShadow: [ // 對應左邊的  box-shadow
          new BoxShadow (
            color: const Color(0xcc000000),
            offset: new Offset(0.0, 2.0),
            blurRadius: 4.0,
          ),
          new BoxShadow (
            color: const Color(0x80000000),
            offset: new Offset(0.0, 6.0),
            blurRadius: 20.0,
          ),
        ], 
      )
    ),
  )
);

.circle {
  text-align: center;
  width: 160px;
  height: 160px;
  border-radius: 50%; 
}

var container = new Container( // grey box
  child: new Center(
    child: new Container( // red circle
      child: new Text( ... ),
      decoration: new BoxDecoration(
        color: Colors.red[400],
        shape: BoxShape.circle, // 畫圓和圓角不太一樣，用的是BoxShape繪制圖像能力
      ),
      width: 160.0,
      height: 160.0, 
    ),
  )
);

// css 的內聯結構
.greybox {
    font: 900 24px Roboto; 
   .redbox {
       em {
          font: 300 48px Roboto;
          font-style: italic;
      }
    } 
}

var container = new Container( // grey box
  child: new Center(
    child: new Container( // red box
      child:  new RichText(
        text: new TextSpan(
          style: bold24Roboto,
          children: [
            new TextSpan(text: "Lorem "), // 繼承內聯樣式
            new TextSpan(
              text: "ipsum",
              style: new TextStyle( // 具有自定義樣式的多帶帶樣式
                fontWeight: FontWeight.w300,
                fontStyle: FontStyle.italic,
                fontSize: 48.0,
              ),
            ),
          ],
        ),
      ),
    ),
  )
);

官方的widgets目錄

點擊每一個card后，里面還有子card, 以一個展開的緯度來看，是這樣的:

這真是一個龐大的組件系統，這不是社區提供的，而是官方的。
flutter 團隊事無巨細的實現了目前市面上基本上能見到的組件方式和類型。
個人認為這樣做優缺點并存的。
先說缺點:

1.學習成本增加，曲線也還是比較陡峭的。

2.組件直接的繼承關系路徑比較零亂，比如
繼承自 Widget 是這些大類道還清晰:
PreferredSizeWidget ProxyWidget RenderObjectWidget StatefulWidget StatelessWidget。
但是，StatelessWidget和StatefulWidget的子類就過于平行化了，名稱上晦澀，沒有抽象架構化，分層或者塔型級別。

StatelessWidget：
StatefulWidget

3.對自定義組件定義模糊，有這么龐大的組件庫，到底以后是有個一個更系統的第三方組件庫去替換它，還是說 Flutter 官方就不建議使用第三方組件,這個也未有定論。

再說優點：

1.可以阻止以后輪子泛濫，在團隊僵持不下使用哪個輪子庫時，最好的理由就是“官方”二字，因為使用官方，可以弱化和規避一些問題,比如: 版本迭代不同步，性能瓶頸，規范不統一等問題,也能快速支持官方的輔助工具。

2.正是由于官方的標準劃一，為自動化編譯，自動化搭建，測試調優，可視化帶來便利，甚至為Ai前端模型化業務場景，提供支撐，都說前端的組件像搭樂高，Flutter就是顆粒標準統一的樂高。

3.天下之勢，分久必合，合久必分。

前端在經歷了 flash 一統pc頁面的富媒體時代，后被喬布斯和H5瓦解；

之后又有H5 的繁盛和框架、語法、構建模式的亂戰；

再到有“別再更新，老子學不動"的呼聲下，希望有個一統江湖的跨平臺系統出現；

讓開發者更專注于，提高業務內容，創造 “新， 酷，炫” 的展現形勢上下功夫。

也許，真有一個前端江湖的王者的誕生。

實際的 Flutter Widget 要復雜的更多的多，在眼花繚亂的 Widget 組件中,筆者想用自己的一些理解，去粗取精，來逐步理解 Flutter 這個新家伙 ,文中有理解不到位的地方,歡迎大家指正。
筆者團隊也正在開發一套《Flutter GO》的APP,幫助大家熟悉復雜的 Flutter Widget。

原文鏈接
更多學習 Flutter的小伙伴，歡迎入QQ群 Flutter Go :679476515
《Flutter GO》項目地址 alibaba/flutter-go