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

porterking發表於2018-10-18
Flutter

Flutter初探

1539587107(1)

本文主要大致介紹Flutter 整體框架，簡單粗略的使用，深度暫且還沒有。

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

原始碼可在文章後檢視。

目錄

  • 一、關於Flutter
  • 二、程式碼大致解讀
  • 三、混合開發
  • 總結

一、關於Flutter

###1、flutter介紹

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

開發語言：dart

1539509311(1)

  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語言中文社群-基本語法等介紹

2、環境配置

中文配置教程

3、flutter特色--你可能會選它的幾個理由

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

4、美中不足

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

5、flutter--widget

1539570669(1)

上述圖中可以看到：

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開始。

1539570893(1)

由widget展開的基礎元件，佈局，互動等；

二、程式碼大致解讀

1、按照慣例 --- 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 等等。

2、佈局

fef361039bdd30af7dd5a4cab38fbf8

1、 佈局拆封：

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

CrossAxisAlignment副軸約束（豎直Y軸）。在這裡說明下，Flutter沒有了原來Android的相對佈局，但是用它已有的控制元件，能達到所有需要各種佈局約束要求；

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

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

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

2、State生命週期：

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

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

StatefulWidget（有狀態）:程式執行中，UI發生變化的，以及使用者互動的；

1539603681(1)

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

  • created：當State物件被建立時候，State.initState方法會被呼叫；
  • initialized：當State物件被建立，但還沒有準備構建時，State.didChangeDependencies在這個時候會被呼叫；
  • ready：State物件已經準備好了構建，State.dispose沒有被呼叫的時候；
  • defunct：State.dispose被呼叫後，State物件不能夠被構建。

呼叫setState方法後，更新檢視，資料改變或者UI需要發生變化，需要再setState方法裡對資料來源進行更新，然後佈局會用新的資料來源重新build，

3、非同步-- 網路請求

常用的async await Future搭配

//HTTP的get請求返回值為Future<String>型別，即其返回值未來是一個String型別的值
getData() async {    //async關鍵字宣告該函式內部有程式碼需要延遲執行
  return await http.get(URL); //await關鍵字宣告運算為延遲執行，然後return運算結果
}
複製程式碼

這時候 如果直接執行 ：

  String data = getData();
複製程式碼

就直接會報錯

1539745314(1)

因為data是String型別，而函式getData()是一個非同步操作函式，其返回值是一個await延遲執行的結果。在Dart中，有await標記的運算，其結果值都是一個Future物件，Future不是String型別，所以就報錯了

可以這麼實現：

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

Future 中thenAPI，作用為getData()非同步執行完成後，在呼叫then方法，並且與Future 後面的語句先順序執行

三、混合開發

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

當然還有一個嘗試：像之前RN一樣，獨立一些模組功能使用flutter開發，將這些獨立模組使用類似SDK形式，引入我們的專案中，開放出介面給Native呼叫；

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

qqqq

閒魚針對專案混合開發改造實踐

總結

Dart語言，運用起來，函式思想與kotlin類似，Dart語言上的特性，kotlin都有，唯一算的上特點就是Dart編譯速度快了。面對物件的思想，和java如出一轍，我學起來倒也不是很吃力。對於編寫程式碼來講，槽點就是他的程式碼風格，括號巢狀太多，每個元件後，以“，”結尾，這樣格式化稍微好一些；

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

官方資源

1、Flutter官網

2、Flutter快速入門

3、Flutter—API 文件

4、Github

5、Google+網上論壇

6、Twitter

7、Gitter

8、Flutter技術週報

專案demo：flutter_demo：下拉請求重新整理|計算器

相關文章