Flutter初探 上下拉分頁請求+計算器實現

Flutter初探

本文主要大體介紹Flutter 總體框架，簡單粗略的使用，深度暫且尚未。

用Dart，寫了個計算器的demo和列表拉下刷新請求demo，基本上入門flutter使用，

源碼可在文章後查看。

目錄

• 1、關於Flutter
• 2、代碼大體解讀
• 3、混合開發
• 總結

1、關於Flutter

###一、flutter介紹

Flutter是一個使用Dart語言開發的跨平臺移動UI框架,經過自建繪製引擎，能高性能、高保真地進行Android和IOS開發，提供響應式視圖而不須要JavaScript橋接器的移動SDK，這就是與和React Native不同也是優點所在，採用Dart的程序語言來編譯避免由JavaScript橋接器引發的性能問題，

開發語言：dart

1. dart具備JIT&AOT雙重編譯執行方式。這樣就能利用JIt進行開發階段的hot reload開發，提高研發效率。同時在最終release版本中使用aot將dart代碼直接變成目標平臺的指令集代碼。簡單高效，最大限度保障了性能，最大限度減小包的大小，目前剛更新flutter preview2.0 對包的大小進一步縮減。
2. dart針對flutter中頻繁建立銷燬Widget的場景作了專門的gc優化。經過分代無鎖垃圾回收器，將gc對性能的影響降至最低。
3. dart語言在語法上面是類java的，易學易用，對於咱們原生開發而言 學習JS，Dart語言更能被接受。（我的感受）

dart語言的優點詳細介紹

Dart語言中文社區-基本語法等介紹

二、環境配置

中文配置教程

三、flutter特點--你可能會選它的幾個理由

1. 熱加載： Flutter 最酷的功能之一，容許你像更新網頁同樣去實時的更新你的項目。
2. 界面UI風格優美： UI 全是代碼寫的而不是 XML。（組件上）而且有豐富的 (Material Design |Cupertino) 組件，實現保持Android 和IOS風格展現一致的效果，Android也能夠以IOS風格展現；（主題上） Android/iOS 的不一樣主題提供api直接判斷不一樣類型，繼而展現不一樣UI
3. 組件足夠小： Flutter 中的有個核心原則 — 組合優先於繼承 他的每個基礎組件很是細微，因此能夠本身組裝建立各式各樣的組件
4. **後援很強大：**第三方庫不斷新增中，Flutter開發社區真的很大，並且很是活躍，國內閒魚已經上線一版，並做爲flutter領導者，在前面不斷踩坑中；

四、美中不足

1. 與RN相比，在性能上和侷限性上，能夠勝之有餘，可是對於在線熱更新這個點,目前沒有可行的預兆，除非把dart的編譯AOT編譯放在客戶端中，顯然是不現實的；雖然，蘋果爸爸一直禁用app熱更新代碼的態度堅定而明確；這個很差評判了
2. 代碼上:括號太多了，各類嵌套,代碼看起來很是不友好;可是瞭解其之用法以後，將整個頁面分塊區分紅一個小模塊獨立，可讀性我我的感受還ok；
3. 畢竟flutter緊跟RN以後才誕生，目前社區，開源方面相對於RN，還不夠完善；

五、flutter--widget

上述圖中能夠看到：

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

Engine使用C++實現，主要包括:Skia,Dart和Text。Skia是開源的二維圖形庫；提供了適用於多種軟硬件平臺的通用API。Dart部分主要包括:Dart Runtime，Garbage Collection(GC)；Text即文本渲染，其渲染層次以下:衍生自minikin的libtxt庫(用於字體選擇，分隔行)

雖然深刻下去的 暫時還不懂，不難看出widget是咱們所能涉及到開發的那一層。Flutter 的核心設計思想即是Everything’s a Widget 即一切即Widget。在flutter的世界裏，包括views,view controllers,layouts等在內的概念都創建在Widget之上。widget是flutter功能的抽象描述。因此掌握Flutter的基礎就是學會使用widget開始。

由widget展開的基礎組件，佈局，交互等；

2、代碼大體解讀

一、按照慣例 --- Hello World

@override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Welcome to Flutter'),
        ),
        body: new Center(
          child: new Text('Hello World'),
        ),
      ),
    );
  }
} 
複製代碼

一個 layout 是由嵌套的組件（Widgets）構建的， 核心 Widget 是 MaterialApp （這是整個的應用程序）， 而後咱們有 Scaffold （這是咱們主界面的 layout 結構），再而後是 AppBar （就像 Android Toolbar） 和 一些 Container 做爲 body，在 body 內部，咱們能夠放置咱們 layout 組件 — Texts, Buttons 等等。

二、佈局

一、 佈局拆封：

這是一個簡單的計算器頁面，很明朗的將整個佈局用Colunm豎向排列，Item中的Row再作橫向佈局，在Flutter 佈局中，體現的是橫向與豎向的概念 約束方面也是以此爲基礎 MainAxisAlignment主軸約束（水平X軸）

CrossAxisAlignment副軸約束（豎直Y軸）。在這裏說明下，Flutter沒有了原來Android的相對佈局，可是用它已有的控件，能達到全部須要各類佈局約束要求；

​ **吐槽一點：**剛學習這種佈局方式，對於約束方法不熟悉，佈局很頭疼，就像按照格子線去排放不一樣物品，一點一點挪動，好在熱重載，改一行代碼就能看見效果

​ 收藏一波各種約束佈局的控件：SizedOverflowBox，OverflowBox，LimitedBox，FractionallySizedBox，SizedBox & ConstrainedBox，FittedBox，RotatedBox等等；有些控件比較冷門須要本身去慢慢收藏，沒用過基本不知道有這樣的都已經幫你寫好的，能提升很多效率 ；

[按鈕控件擴展](zhuanlan.zhihu.com/p/38500192�" >，)

二、State生命週期：

​ flutter和RN一致，採用響應式視圖，維護了一個狀態機，只更新改變的最小區域界面 ； ​ 它有兩類widght：

StatelessWidget（無狀態）:UI純展現做用，無交互以及UI變化，例如：提示語等；

StatefulWidget（有狀態）:程序運行中，UI發生變化的，以及用戶交互的；

State的生命週期有四種狀態：

• created：當State對象被建立時候，State.initState方法會被調用；
• initialized：當State對象被建立，但尚未準備構建時，State.didChangeDependencies在這個時候會被調用；
• ready：State對象已經準備好了構建，State.dispose沒有被調用的時候；
• defunct：State.dispose被調用後，State對象不可以被構建。

調用setState方法後，更新視圖，數據改變或者UI須要發生變化，須要再setState方法裏對數據源進行更新，而後佈局會用新的數據源從新build，

三、異步-- 網絡請求

經常使用的async await Future搭配

//HTTP的get請求返回值爲Future<String>類型，即其返回值將來是一個String類型的值
getData() async {    //async關鍵字聲明該函數內部有代碼須要延遲執行
  return await http.get(URL); //await關鍵字聲明運算爲延遲執行，而後return運算結果
}
複製代碼

這時候 若是直接執行 ：

String data = getData();
複製代碼

就直接會報錯

由於data是String類型，而函數getData()是一個異步操做函數，其返回值是一個await延遲執行的結果。在Dart中，有await標記的運算，其結果值都是一個Future對象，Future不是String類型，因此就報錯了

能夠這麼實現：

getData().then(data){
   String _data = data;
}
複製代碼

Future 中thenAPI，做用爲getData()異步執行完成後，在調用then方法，而且與Future 後面的語句先順序執行

3、混合開發

針對咱們目前公版上或者分支上的項目而言，不可能將整個項目移植成Flutter，顯然是不現實的。如如果一個新的小項目，我以爲認爲這個是能夠是個新的嘗試，新的技術氛圍，也能夠衍生或者接觸其餘的更多領域，有利於增長團隊氛圍。

固然還有一個嘗試：像以前RN同樣，獨立一些模塊功能使用flutter開發，將這些獨立模塊使用相似SDK形式，引入咱們的項目中，開放出接口給Native調用；

問題：由Flutter目錄再分別包含Native工程的目錄（即ios和android兩個目錄）組成。默認狀況下，引入了Flutter的Native工程沒法脫離父目錄進行獨立構建和運行，由於它會反向依賴於Flutter相關的庫和資源

閒魚針對項目混合開發改造實踐

總結

Dart語言，運用起來，函數思想與kotlin相似，Dart語言上的特性，kotlin都有，惟一算的上特色就是Dart編譯速度快了。面對對象的思想，和java一模一樣，我學起來倒也不是很吃力。對於編寫代碼來說，槽點就是他的代碼風格，括號嵌套太多，每一個組件後，以「，」結尾，這樣格式化稍微好一些；

Flutter官方吹的很大，說它是革命性的，也有必定道理。可是我以爲RN對於熟悉web開發的人來講，是更好的選擇。可是對於純native開發的移動開發人員，直接學習Flutter會更好，Flutter也比較適合原本就是作native開發的人 目前，Flutter仍是處於beta版本，儘管如此，如今閒魚也已經做爲大頭，在前面領路了。做爲Google親兒子，相信Flutter 不會像RN同樣，路途那麼坎坷

官方資源

一、Flutter官網

二、Flutter快速入門

三、Flutter—API 文檔

四、Github

五、Google+網上論壇

六、Twitter

七、Gitter

八、Flutter技術週報

項目demo：flutter_demo：下拉請求刷新|計算器