谷歌官方6月21日宣布Flutter的首個發(fā)布預(yù)覽版（Release Preview 1）正式發(fā)布祷愉，這標志著谷歌進入了Flutter正式版（1.0）發(fā)布前的最后階段整慎。

聽我們大神說這個東西有搞頭邓梅，之前有做過一段時間ionic智听，了解過一些mobilephone的東西赞别。所以最近開始搗鼓下flutter焦履。這里記錄一下作為一個iOS Developer的使用感受和一些心得體會。

Flutter是什么

Flutter是一個由谷歌開發(fā)的開源移動應(yīng)用軟件開發(fā)工具包视卢，用于為Android和iOS開發(fā)應(yīng)用踱卵，同時也將是Google Fuchsia下開發(fā)應(yīng)用的主要工具。Flutter框架包含了兩套匹配特定設(shè)計語言的組件据过。稱作Material Design的組件實現(xiàn)的是同名的谷歌設(shè)計語言惋砂，稱作Cupertino的組件模仿了蘋果iOS的妒挎。---維基百科

簡單來說它與RN、Ionic班利、Weex等眾多混合開發(fā)平臺框架一樣饥漫，都是一套代碼實現(xiàn)多平臺發(fā)布的跨平臺框架。Flutter是以dart為基礎(chǔ)做出的一套SDK罗标，支持在Android和iOS上構(gòu)建APP庸队。具體的可以看flutte??r官網(wǎng)的介紹。

Flutter與其他Hybird框??架的不同

首先要說的就是他的構(gòu)建方式闯割，??有說到它屬于Dart的一個SDK彻消。我覺得Flutter與其他跨平臺的最大不同之處是它自建了一個2D渲染引擎，在性能上要比其他基于js的框架好上很多宙拉，后面會講到具體性能部分宾尚。
代碼風格和java比較接近，個人感覺和前端標簽也很像谢澈，有人說喜歡XML布局的對于Dart會比較難受煌贴。它的UI布局思想是一切皆為widget，大家感受一下：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: new Text(widget.title),
      ),
      body: new Center(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text(
              'You have pushed the button this many times:',
            ),
            new Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),

      floatingActionButton: new FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

上面這個是初始化flutter的時候默認的代碼锥忿。

效果圖

就我個人而言牛郑，第一眼看到這個的時候覺得還算好，當我自己寫了一份個人中心的時候發(fā)現(xiàn)真的是有點心累敬鬓，一行行的堆疊真的是很煩淹朋，每一個都有子類然后還有繼續(xù)堆疊，在開發(fā)APP的時候最不喜歡的事就是多層嵌套钉答，尤其是邏輯判斷的時候础芍。我們都會想著盡量簡化邏輯代碼不簡化邏輯達到我們想要的效果，避免因為多層嵌套邏輯使代碼沒有可讀性維護性数尿，本著這個思想后重新對他做簡化仑性，發(fā)現(xiàn)下面提到的5個重點中所有東西都是一個小部件是核心內(nèi)容，你把每一個嵌套都拿出去做一個View來看就會變得很簡單砌创，尤其是flutter是一種響應(yīng)式框架虏缸。

使用時遇到的坑和一些提醒

首先要說的是一定要用編輯器，真的嫩实。。窥岩。
_{1.我在第一次配置時直接clone了flutter的倉庫甲献，配置環(huán)境變量。在配置的過程中一直卡在改PATH這颂翼，為什么呢晃洒？因為我懶直接復(fù)制了官方的終端命令慨灭，在都配置完事后回頭調(diào)查PATH錯誤問題是發(fā)現(xiàn)是文檔給的命令多了一個空格。球及。氧骤。}Ps：現(xiàn)在已經(jīng)更改掉了，而且貼心的使用了pwd吃引，請放心復(fù)制筹陵。
_{2.千萬別升級到最新系統(tǒng)，在配置的過程中想體驗一下新的夜間模式镊尺，更想耍一下黑色背景的Xcode朦佩。我把系統(tǒng)升級到了Mojave，然后驚喜的發(fā)現(xiàn)幾個必要工具裝不上（libimobiledevice庐氮，ideviceinstaller）}Ps：開心~语稠，在前幾天這個問題也被解決了！如果你是最新系統(tǒng)弄砍，有提示你升級Xcode的時候你發(fā)現(xiàn)你是最新的Xcode仙畦，參照下圖改一下就好了。

切換Command Line tools

 flutter build aot --release --target-platform ios --ios-arch armv7,arm64

去 build目錄下找到 App.framework替換iOS文件夾下的同文件
然后把 Flutter.framework替換成 flutter/bin/cache/artifacts/engine/ios-release/Flutter.framework的這個条获。
PS：其他還有的會繼續(xù)補充忠荞，如果有你發(fā)現(xiàn)的新問題隨時歡迎留言~

探討

為什么使用flutter

Google Flutter--5 reasons why you may love it：

• 熱重載（這個感覺還一般，而且比較費內(nèi)存也無法真正測試你的APP性能）
• 全套小部件（這是我最喜歡的）
• 所有東西都是一個小部件（這個也不錯）
• Android / iOS 差異化主題（iOS：Cupertino，Android：Material Design）
• 非常委煤、非常堂油、非常多的資源 （官方支持的資源很多，比如上邊的代碼有自帶的themedata碧绞，scaffold府框，tarbar等等會節(jié)省你太多的開發(fā)時間，我覺得weex開發(fā)者會有深刻的體會吧）
• 我覺得還可以加一條讥邻，就是他的響應(yīng)式框架迫靖，響應(yīng)式試圖- - - 不需要 JavaScript 的橋接器。目前已知的ReactX包含了眾多的響應(yīng)式語言计维，RxDart對于flutter或者說Dart來說只是一個增強包袜香，下面也會稍微詳細的說一下。

響應(yīng)式框架

核心原則：
Flutter包括一個現(xiàn)代的響應(yīng)式框架鲫惶、一個2D渲染引擎蜈首、現(xiàn)成的widget和開發(fā)工具。這些組件可以幫助您快速地設(shè)計欠母、構(gòu)建欢策、測試和調(diào)試應(yīng)用程序。

Flutter框架

下面這個是組合型視圖：

視圖樹

還有代理性的ProxyWidget作用是數(shù)據(jù)傳遞以及展示型的widget赏淌，具體的大家可以自己查找一下踩寇。
StatefullWidget存在中間狀態(tài)變化且都是immutable的，狀態(tài)變化存儲在哪里六水？Flutter 引入state的類用于存放中間態(tài)俺孙，通過調(diào)用state.setState()進行此節(jié)點及以下的整個子樹更新。在iOS中的Controller有生命周期掷贾，那么state的周期呢睛榄？

initState()： state create之后被insert到tree時調(diào)用的
didUpdateWidget(newWidget)：祖先節(jié)點rebuild widget時調(diào)用
deactivate()：widget被remove的時候調(diào)用，一個widget從tree中remove掉想帅，可以在dispose接口被調(diào)用前场靴，重新instert到一個新tree中
didChangeDependencies()：
初始化時，在initState()之后立刻調(diào)用
當依賴的InheritedWidget rebuild,會觸發(fā)此接口被調(diào)用
build()：
After calling [initState].
After calling [didUpdateWidget].
After receiving a call to [setState].
After a dependency of this [State] object changes (e.g., an[InheritedWidget] referenced by the previous [build] changes).
After calling [deactivate] and then reinserting the [State] object into the tree at another location.
dispose()：Widget徹底銷毀時調(diào)用
reassemble()： hot reload調(diào)用

性能

和 React Native 一樣港准，F(xiàn)lutter 也提供響應(yīng)式的視圖旨剥，F(xiàn)lutter 采用不同的方法避免由 JavaScript 橋接器引起的性能問題，即用名為 Dart 的程序語言來編譯浅缸。Dart是用預(yù)編譯的方式編譯多個平臺的原生代碼轨帜，這允許Flutter直接與平臺通信，同時使用Skia圖形引擎來完成圖形衩椒、文本阵谚、圖像蚕礼、動畫等繪制烟具，擁有自己獨立的一套圖形系統(tǒng)梢什，不再依賴于原生。而不需要通過執(zhí)行上下文切換的 JavaScript 橋接器朝聋。編譯為原生代碼也可以加快應(yīng)用程序的啟動時間嗡午。雖然比其他框架來說不需要JavaScript橋接器，但是性能相對于native來說還是有差距的冀痕，至少現(xiàn)在的preview版本來說內(nèi)存利用以及CPU的使用上都是趕不上native的荔睹。我在做測試的時候發(fā)現(xiàn)內(nèi)存使用率上一致居高不下，但是后來發(fā)現(xiàn)應(yīng)該是熱更新造成的言蛇，當我想在release模式的時候發(fā)現(xiàn)又出現(xiàn)更多問題僻他，具體的看編譯內(nèi)容，推薦看下這篇文章How fast is Flutter? I built a stopwatch app to find out.
總結(jié)來說就是說腊尚，雖然實用了自己的渲染引擎吨拗，但是由于視圖的刷新是整個widget刷新（理念就是任何都是widget），而原生方面（僅以iOS為例）刷新的只是label的文案婿斥，而不需要重新創(chuàng)建label劝篷。優(yōu)化的方式是單獨建立每一個元素內(nèi)容。由此引出民宿，為啥官方文檔建議盡量使用無狀態(tài)的StatelessWidget娇妓，除非有必要在使用StatefulWidget。
后續(xù)我會給出RN活鹰，F(xiàn)lutter及iOS原生的內(nèi)存及CPU使用率的圖以供參考哈恰。

編譯

Flutter 是支持原生頁面和 Flutter 頁面混合開發(fā)的，但是不支持原生組件在Flutter 中使用志群，原生端有 methodchannel 來支持 Flutter 對原生的一些API調(diào)用着绷。
我們現(xiàn)在已有項目如果想介入Flutter怎么辦？集成現(xiàn)有iOS項目這個是官方給出了一些步驟赖舟，但我覺得不是正八經(jīng)的告訴你怎么做蓬戚，只是一個解決的辦法。需要你自己去把Flutter.framework及App.framework+info.plist導入已有工程宾抓，且需要你更改appdelegate為flutter的來做一次繼承子漩。
在踩坑的時候發(fā)現(xiàn)鏈接器在編譯可執(zhí)行文件的時候還會出現(xiàn)錯誤。石洗。幢泼。后來我們大神說更新下package就好了，這是一個已知問題且已經(jīng)修復(fù)讲衫。

總結(jié)

Flutter是一個很好的多平臺開發(fā)解決方案框架缕棵，可以幫助你節(jié)省很多開發(fā)時間孵班。但就目前來看，雖然Flutter沒有使用JavaScript橋接器來與native連接招驴，自有一個2D渲染引擎篙程。但對于如今這個需要性能，用戶體驗的時代來說這并不能達到我們的要求别厘。同時在編譯過程中又有各種的問題虱饿，最基礎(chǔ)的一件事就是當你需要打包的時候，你無法預(yù)測會發(fā)生什么錯誤導致打包失敗---這主要跟過長的操作過程有關(guān)触趴。

• 所以當你是一個初學者要學習編程的時候氮发，這個語言并不是一個能讓你節(jié)省時間的工具。
  如果你有一定的移動端開發(fā)基礎(chǔ)冗懦，你可以嘗試下使用flutter爽冕，尤其當你沒領(lǐng)略過響應(yīng)式框架及鏈式語法的魅力。

• 如果你想對現(xiàn)有項目做集成可以看下閑魚的文章披蕉，他們已經(jīng)接入了Flutter颈畸，并深度的解讀了可行性。
  如果說你的項目并沒有使用大量H5或者集成過其他Hybird框架嚣艇，那么我不建議你們接入Flutter承冰，這會讓你醉生夢死，尤其在你并沒有搞清楚Dart做了什么的時候食零。

Ps：還少一些Reactive的東西沒有整理完困乒，后續(xù)會接著這篇發(fā)上來。

引用：
Flutter中文網(wǎng)
移動開發(fā)新利器 | 一文深入了解 Flutter 界面開發(fā)