移動端開發新趨勢Flutter

摘要： 該文章屬於<簡書 — 劉小壯>原創，轉載請註明： <簡書 — 劉小壯> https://www.jianshu.com/p/1a90adc09e99 介紹 Flutter 是 Google 開發的新一代跨平臺方案， Flutter 可以實...

該文章屬於<簡書 — 劉小壯>原創，轉載請註明：

<簡書 — 劉小壯> https://www.jianshu.com/p/1a90adc09e99

介紹

Flutter 是 Google 開發的新一代跨平臺方案， Flutter 可以實現寫一份程式碼同時執行在iOS和Android裝置上，並且提供很好的效能體驗。 Flutter 使用 Dart 作為開發語言，這是一門簡潔、強型別的程式語言。 Flutter 對於iOS和Android裝置，提供了兩套視覺庫，可以針對不同的平臺有不同的展示效果。

Flutter 原本是為了解決 Web 開發中的一些問題，而開發的一套精簡版 Web 框架，擁有獨立的渲染引擎和開發語言，但後來逐漸演變為移動端開發框架。正是由於 Dart 當初的定位是為了替代 JS 成為 Web 框架，所以 Dart 的語法更接近於 JS 語法。例如定義物件構建方法，以及例項化物件的方式等。

在 Google 剛推出 Flutter 時，其發展很緩慢，終於在18年釋出第一個Bate版之後迎來了爆發性增長，釋出第一個 Release 版時增長速度更快。可以從Github上Star資料看出來這個增長的過程。在19年最新的 Flutter 1.2 版本中，已經開放 Web 支援的Beta版。

目前已經有不少大型專案接入 Flutter ，阿里的鹹魚、頭條的抖音、騰訊的NOW直播，都將 Flutter 當做應用程式的開發語言。除此之外，還有一些其他中小型公司也在做。

整體架構

Flutter 可以理解為開發SDK或者工具包，其通過 Dart 作為開發語言，並且提供 Material 和 Cupertino 兩套視覺控制元件，檢視或其他和檢視相關的類，都以 Widget 的形式表現。 Flutter 有自己的渲染引擎，並不依賴原生平臺的渲染。 Flutter 還包含一個用 C++ 實現的 Engine ，渲染也是包含在其中的。

Engine

Flutter 是一套全新的跨平臺方案， Flutter 並不像 React Native 那樣，依賴原生應用的渲染，而是自己有自己的渲染引擎，並使用 Dart 當做 Flutter 的開發語言。 Flutter 整體框架分為兩層，底層是通過 C++ 實現的引擎部分， Skia 是 Flutter 的渲染引擎，負責跨平臺的圖形渲染。 Dart 作為 Flutter 的開發語言，在 C++ 引擎上層是 Dart 的 Framework 。

Flutter 不僅僅提供了一套視覺庫，在 Flutter 整體框架中包含各個層級階段的庫。例如實現一個遊戲功能，上面一些遊戲控制元件可以用上層視覺庫，底層遊戲可以直接基於 Flutter 的底層庫進行開發，而不需要呼叫原生應用的底層庫。 Flutter 的底層庫是基於 Open GL 實現的，所以 Open GL 可以做的 Flutter 都可以。

視覺庫

在上層 Framework 中包含兩套視覺庫，符合 Android 風格的 Material ，和符合iOS風格的 Cupertino 。也可以在此基礎上，封裝自己風格的系統元件。 Cupertino 是一套iOS風格的視覺庫，包含iOS的導航欄、 button 、 alertView 等。

Flutter 對不同硬體平臺有不同的相容，例如同樣的 Material 程式碼執行在iOS和Android不同平臺上，有一些平臺特有的顯示和互動， Flutter 依然對其進行了區分適配。例如滑動 ScrollView 時，iOS平臺是有回彈效果的，而Android平臺則是阻尼效果。例如iOS的導航欄標題是居中的，Android導航欄標題是向左的，等等。這些 Flutter 都做了區分相容。

除了 Flutter 為我們做的一些適配外，有一些控制元件是需要我們自己做適配的，例如 AlertView ，在Android和iOS兩個平臺下的表現就是不同的。這些iOS特性的控制元件都定義在 Cupertino 中，所以建議在進行App開發時，對一些控制元件進行上層封裝。

例如 AlertView 則對其進行一個二次封裝，控制元件內部進行裝置判斷並選擇不同的視覺庫，這樣可以保證各個平臺的效果。

雖然 Flutter 對於iOS和Android兩個平臺，開發有 cupertino 和 material 兩個視覺庫，但實際開發過程中的選擇，應該使用 material 當做視覺庫。因為 Flutter 對iOS的支援並不是很好，主要對Android平臺支援比較好， material 中的UI控制元件要比 cupertino 多好幾倍。

Dart

Dart 是 Google 在2011年推出的一款應用於 Web 開發的程式語言， Dart 剛推出的時候，定位是替代 JS 做前端開發，後來逐步擴充套件到移動端和服務端。

Dart 是 Flutter 的開發語言， Flutter 必須遵循 Dart 的語言特性。在此基礎上，也會有自己的東西，例如 Flutter 的上層 Framework ，自己的渲染引擎等。可以說， Dart 只是 Flutter 的一部分。

Dart 是強型別的，對定義的變數不需要宣告其型別， Flutter 會對其進行型別推導。如果不想使用型別推導，也可以自己宣告指定的型別。

Hot Reload

Flutter 支援亞秒級熱過載， Android Studio 和 VSCode 都支援 Hot Reload 的特性。但需要區分的是，熱過載和熱更新是不同的兩個概念，熱過載是在執行除錯狀態下，將新程式碼直接更新到執行中的二進位制。而熱更新是在上線後，通過 Runtime 或其他方式，改變現有執行邏輯。

AOT、JIT

Flutter 支援 AOT ( Ahead of time )和 JIT ( Just in time )兩種編譯模式， JIT 模式支援在執行過程中進行 Hot Reload 。重新整理過程是一個增量的過程，由系統對本次和上次的程式碼做一次 snapshot ，將新的程式碼注入到 DartVM 中進行重新整理。但有時會不能進行 Hot Reload ，此時進行一次全量的 Hot Reload 即可。

而 AOT 模式則是在執行前預先編譯好，這樣在每次執行過程中就不需要進行分析、編譯，此模式的執行速度是最快的。 Flutter 同時採用了兩種方案，在開發階段採用 JIT 模式進行開發，在 release 階段採用 AOT 模式，將程式碼打包為二進位制進行釋出。

在開發原生應用時，每次修改程式碼後都需要重新編譯，並且執行到硬體裝置上。由於 Flutter 支援 Hot Reload ，可以進行熱過載，對專案的開發效率有很大的提升。

由於 Flutter 實現機制支援 JIT 的原因，理論上來說是支援熱更新以及伺服器下發程式碼的。可以從伺服器。但是由於這樣會使效能變差，而且還有稽核的問題，所以 Flutter 並沒有採用這種方案。

實現原理

Flutter 的熱過載是基於 State 的，也就是我們在程式碼中經常出現的 setState 方法，通過這個來修改後，會執行相應的 build 方法，這就是熱過載的基本過程。

Flutter 的 hot reload 的實現原始碼在下面路徑中，在此路徑中包含 run_cold.dart 和 run_hot.dart 兩個檔案，前者負責冷啟動，後者負責熱過載。

~/flutter/packages/flutter_tools/lib/src/run_hot.dart

熱過載的程式碼實現在 run_hot.dart 檔案中，有 HotRunner 來負責具體程式碼執行。當 Flutter 進行熱過載時，會呼叫 restart 函式，函式內部會傳入一個 fullRestart 的 bool 型別變數。熱過載分為全量和非全量， fullRestart 引數就是表示是否全量。以非全量熱過載為例，函式的 fullRestart 會傳入 false ，根據傳入 false 引數，下面是部分核心程式碼。

Future<OperationResult> restart({ bool fullRestart = false, bool pauseAfterRestart = false, String reason }) async {
if (fullRestart) {
// .....
} else {
final bool reloadOnTopOfSnapshot = _runningFromSnapshot;
final String progressPrefix = reloadOnTopOfSnapshot ? 'Initializing' : 'Performing';
final Status status = logger.startProgress(
'$progressPrefix hot reload...',
progressId: 'hot.reload'
);
OperationResult result;
try {
result = await _reloadSources(pause: pauseAfterRestart, reason: reason);
} finally {
status.cancel();
}
}
}

呼叫 restart 函式後，內部會呼叫 _reloadSources 函式，去執行內部邏輯。下面是大概邏輯執行流程。

在 _reloadSources 函式內部，會呼叫 _updateDevFS 函式，函式內部會掃描修改的檔案，並將檔案修改前後進行對比，隨後會將被改動的程式碼生成一個 kernel files 檔案。

隨後會通過 HTTP Server 將生成的 kernel files 檔案傳送給 Dart VM 虛擬機器，虛擬機器拿到 kernel 檔案後會呼叫 _reloadSources 函式進行資源過載，將 kernel 檔案注入正在執行的 Dart VM 中。當資源過載完成後，會呼叫RPC介面觸發 Widgets 的重繪。

跨平臺方案對比

現在市面上RN、Weex的技術方案基本一樣，所以這裡就以RN來代表類似的跨平臺方案。 Flutter 是基於 GPU 進行渲染的，而RN則將渲染交給原生平臺，而自己只是負責通過 JSCore 將檢視組織起來，並處理業務邏輯。所以在渲染效果和效能這塊， Flutter 的效能比RN要強很多。

跨平臺方案一般都需要對各個平臺進行平臺適配，也就是建立各自平臺的適配層，RN的平臺適配層要比 Flutter 要大很多。因為從技術實現來說，RN是通過 JSCore 引擎進行原生程式碼呼叫的，和原生程式碼互動很多，所以需要更多的適配。而 Flutter 則只需要對各自平臺獨有的特性進行適配即可，例如呼叫系統相簿、貼上板等。

Flutter 技術實現是基於更底層實現的，對平臺依賴度不是很高，相對來說，RN對平臺的依賴度是很高的。所以RN未來的技術升級，包括擴充套件之類的，都會受到很大的限制。而 Flutter 未來的潛力將會很大，可以做很多技術改進。

Widget

在 Flutter 中將顯示以及和顯示相關的部分，都統一定義為 widget ，下面列舉一些 widget 包含的型別：

1. 用於顯示的檢視，例如 ListView 、 Text 、 Container 等。
2. 用來操作檢視，例如 Transform 等動畫相關。
3. 檢視佈局相關，例如 Center 、 Expanded 、 Column 等。

在 Flutter 中，所有的檢視都是由 Widget 組成， Label 、 AppBar 、 ViewController 等。在 Flutter 的設計中，組合的優先順序要大於繼承，整體檢視類結構繼承層級很淺但單層很多類。如果想定製或封裝一些控制元件，也應該以組合為主，而不是繼承。

在iOS開發中，我也經常採用這種設計方案，組合大於繼承。因為如果繼承層級過多的話，一個是不便於閱讀程式碼，還有就是不好維護程式碼。例如底層需要改一個通用的樣式，但這個類的繼承層級比較複雜，這樣改動的話影響範圍就比較大，會將一些不需要改的也改掉，這時候就會發現繼承很雞肋。但在iOS中有 Category 的概念，這也是一種組合的方式，可以通過將一些公共的東西放在 Category 中，使繼承的方便性和組合的靈活性達到一個平衡。

Flutter 中並沒有單獨的佈局檔案，例如iOS的XIB這種，程式碼都在 Widget 中定義。和 UIView 的區別在於， Widget 只是負責描述檢視，並不參與檢視的渲染。 UIView 也是負責描述檢視，而 UIView 的 layer 則負責渲染操作，這是二者的區別。

瞭解Widget

在應用程式啟動時， main 方法接收一個 Widget 當做主頁面，所以任何一個 Widget 都可以當做根檢視。一般都是傳一個 MaterialApp ，也可以傳一個 Container 當做根檢視，這都是被允許的。

在 Flutter 應用中，和介面顯示及使用者互動的物件都是由 Widget 構成的，例如檢視、動畫、手勢等。 Widget 分為 StatelessWidget 和 StatefulWidget 兩種，分別是無狀態和有狀態的 Widget 。

StatefulWidget 本質上也是無狀態的，其通過 State 來處理 Widget 的狀態，以達到有狀態， State 出現在整個 StatefulWidget 的生命週期中。

當構建一個 Widget 時，可以通過其 build 獲得構建流程，在構建流程中可以加入自己的定製操作，例如對其設定title或檢視等。

return Scaffold(
appBar: AppBar(
title: Text('ListView Demo'),
),
body: ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index) {
return Text(dataList[index]);
},
),
);

有些 Widget 在構建時，也提供一些引數來幫助構建，例如構建一個 ListView 時，會將 index 返回給 build 方法，來區別構建的Cell，以及構建的上下文 context 。

itemBuilder: (BuildContext context, int index) {
return Text(dataList[index]);
}

StatelessWidget

StatelessWidget 是一種靜態 Widget ，即建立後自身就不能再進行改變。在建立一個 StatelessWidget 後，需要重寫 build 函式。每個靜態 Widget 都會有一個 build 函式，在建立檢視物件時會呼叫此方法。同樣的，此函式也接收一個 Widget 型別的返回值。

class RectangleWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center (
// UI Code
);
}
}

StatefulWidget

Widget 本質上是不可被改變的，但 StatefulWidget 將狀態拆分到 State 中去管理，當資料發生改變時由 State 去處理檢視的改變。

下面是建立一個動態 Widget ，當建立一個動態 Widget 需要配合一個 State ，並且需要重寫 createState 方法。重寫此函式後，指定一個 Widget 對應的 State 並初始化。

下面例子中，在 StatefulWidget 的父類中包含一個Key型別的 key 變數，這是無論靜態 Widget 還是動態 Widget 都具備的引數。在動態 Widget 中定義了自己的成員變數title，並在自定義的初始化方法中傳入，通過下面 DynamicWidget 類的構造方法，並不需要在內部手動進行title的賦值，title即為傳入的值，是由系統完成的。

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

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

由於上面動態 Widget 定義了初始化方法，在呼叫動態 Widget 時可以直接用自定義初始化方法即可。

DynamicWidget(key: 'key', title: 'title');

State

StatefulWidget 的改變是由 State 來完成的， State 中需要重寫 build 方法，在 build 中進行檢視組織。 StatefulWidget 是一種響應式檢視改變的方式，資料來源和檢視產生繫結關係，由資料來源驅動檢視的改變。

改變 StatefulWidget 的資料來源時，需要呼叫 setState 方法，並將資料來源改變的操作寫在裡面。使用動態 Widget 後，是不需要我們手動去重新整理檢視的。系統在 setState 方法呼叫後，會重新呼叫對應 Widget 的 build 方法，重新繪製某個 Widget 。

下面的程式碼示例中添加了一個float按鈕，並給按鈕設定了一個回撥函式 _onPressAction ，這樣在每次觸發按鈕事件時都會呼叫此函式。 counter 是一個整型變數並和 Text 相關聯，當 counter 的值在 setState 方法中改變時， Text Widget 也會跟著變化。

class DynamicWidgetState extends State<DynamicWidget> {
int counter = 0;
void _onPressAction() {
setState(() {
counter++;
});
}

@override
Widget build(BuildContext context) {
return new Scaffold(
body: Center(
child: Text('Button tapped $_counter.')
),
floatingActionButton: FloatingActionButton(
onPressed: _onPressAction,
tooltip: 'Increment',
child: Icon(Icons.add)
)
);
}
}

主要Widget

在iOS中有 UINavigationController 的概念，其並不負責顯示，而是負責控制各個頁面的跳轉操作。在 Flutter 中可以將 MaterialApp 理解為iOS的導航控制器，其包含一個 navigationBar 以及導航棧，這和iOS是一樣的。

在iOS中除了用來顯示的檢視外，檢視還有對應的 UIViewController 。在 Flutter 中並沒有專門用來管理檢視並且和 View 一對一的類，但從顯示的角度來說，有類似的類 Scaffold ，其包含控制器的 appBar ，也可以通過 body 設定一個 widget 當做其檢視。

theme

theme 是 Flutter 提供的介面風格API， MaterialApp 提供有 theme 屬性，可以在 MaterialApp 中設定全域性樣式，這樣可以統一整個應用的風格。

new MaterialApp(
title: title,
theme: new ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
)
);

如果不想使用系統預設主題，可以將對應的控制元件或試圖用 Theme 包起來，並將 Theme 當做 Widget 賦值給其他 Widget 。

new Theme(
data: new ThemeData(
accentColor: Colors.yellow,
),
child: new FloatingActionButton(
onPressed: () {},
child: new Icon(Icons.add),
),
);

有時 MaterialApp 設定的統一風格，並不能滿足某個 Widget 的要求，可能還需要有其他的外觀變化，可以通過 Theme.of 傳入當前的 BuildContext ，來對 theme 進行擴充套件。

Flutter 會根據傳入的 context ，順著 Widget 樹查詢最近的 Theme ，並對 Theme 複製一份防止影響原有的 Theme ，並對其進行擴充套件。

new Theme(
data: Theme.of(context).copyWith(accentColor: Colors.yellow),
child: new FloatingActionButton(
onPressed: null,
child: new Icon(Icons.add),
),
);

網路請求

Flutter 中可以通過 async 、 await 組合使用，進行網路請求。 Flutter 中的網路請求大體有三種：

HttpClient
http.dart
dio

http網路庫

http 網路庫定義在 http.dart 中，內部程式碼定義很全，包括 HttpStatus 、 HttpHeaders 、 Cookie 等很多基礎資訊，有助於我們瞭解 http 請求協議。

因為是三方庫，所以需要在 pubspec.yaml 中加入下面的引用。

http: '>=0.11.3+12'

下面是 http.dart 的請求示例程式碼，可以看到請求很簡單，真正的請求程式碼其實就兩行。生成一個 Client 請求物件，呼叫 client 例項的get方法(如果是post則呼叫post方法)，並用 Response 物件去接收請求結果即可。

通過 async 修飾發起請求的方法，表示這是一個非同步操作，並在請求程式碼的前面加入 await ，修飾這裡的程式碼需要等待資料返回，需要過一段時間後再處理。

請求回來的資料預設是 json 字串，需要對其進行 decode 並解析為資料物件才可以使用，這裡使用系統自帶的 convert 庫進行解析，並解析為陣列。

import 'package:http/http.dart' as http;

class RequestDemoState extends State<MyHomePage> {
List dataList = [];

@override
void initState() {
super.initState();
loadData();
}

// 發起網路請求
loadData() async{
String requestURL = 'https://jsonplaceholder.typicode.com/posts';
Client client = Client();
Response response = await client.get(requestURL);

String jsonString = response.body;
setState(() {
// 資料解析
dataList = json.decode(jsonString);
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title)
),
body: ListView.builder(
itemCount: dataList.length,
itemBuilder: (BuildContext context, int index) {
return Text(dataList[index]['title']);
},
),
);
}
}

在呼叫 Client 進行post資料請求時，需要傳入一個字典進去， Client 會通過將字典當做post的 from 表單。

 void requestData() async {
var params = Map<String, String>();
params["username"] = "lxz";
params["password"] = "123456";

var client = http.Client();
var response = await client.post(url_post, body: params);
_content = response.body;
}

dio網路庫

dio 庫的呼叫方式和 http 庫類似，這裡不過多介紹。 dio 庫相對於 http 庫強大的在於， dio 庫提供了更好的 Cookie 管理、檔案的上傳下載、 fromData 表單等處理。所以，如果對網路庫需求比較複雜的話，還是建議使用 dio 。

// 引入外部依賴
dio: ^1.0.9

資料解析

convert

系統自帶有 convert 解析庫，在使用時直接 import 即可。 convert 類似於iOS自帶的JSON解析類 NSJSONSerialization ，可以直接將json字串解析為字典或陣列。

import 'dart:convert';
// 解析程式碼
dataList = json.decode(jsonString);

但是，我們在專案中使用時，一般都不會直接使用字典取值，這是一種很不好的做法。一般都會將字典或陣列轉換為模型物件，在專案中使用模型物件。可以定義類似 Model.dart 這樣的模型類，並在模型類中進行資料解析，對外直接暴露公共變數來讓外界獲取值。

自動序列化

但如果定義模型類的話，一個是要在程式碼內部寫取值和賦值程式碼，這些都需要手動完成。另外如果當服務端欄位發生改變後，客戶端也需要跟著進行改變，所以這種方式並不是很靈活。

可以採用json序列化的三方庫 json_serializable ，此庫可以將一個類標示為自動JSON序列化的類，並對類提供JSON和物件相互轉換的能力。也可以通過命令列開啟一個 watch ，當類中的變數定義發生改變時，相關程式碼自動發生改變。

首先引入下面的三個庫，其中包括依賴庫一個，以及除錯庫兩個。

dependencies:
json_annotation: ^2.0.0

dev_dependencies:
build_runner: ^1.0.0
json_serializable: ^2.0.0

定義一個模型檔案，例如這裡叫做 User.dart 檔案，並在內部定義一個 User 的模型類。隨後引入 json_annotation 的依賴，通過 @JsonSerializable() 標示此類需要被 json_serializable 進行合成。

定義的 User 類包含兩部分，例項變數和兩個轉換函式。在下面定義json轉換函式時，需要注意函式命名一定要按照下面格式命名，否則不能正常生成 user.g.dart 檔案。

import 'package:json_annotation/json_annotation.dart';

// 定義合成後的新檔案為user.g.dart
part 'user.g.dart';

@JsonSerializable()

class User {
String name;
int age;
String email;

factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
Map<String, dynamic> toJson() => _$UserToJson(this);
}

下面就是 user.dart 指定生成的 user.g.dart 檔案，其中包含JSON和物件相互轉換的程式碼。

part of 'user.dart';

User _$UserFromJson(Map<String, dynamic> json) {
return User(
json['name'] as String, json['age'] as int, json['email'] as String);
}

Map<String, dynamic> _$UserToJson(User instance) => <String, dynamic>{
'name': instance.name,
'age': instance.age,
'email': instance.email
};

有的時候服務端返回的引數名和本地的關鍵字衝突，或者命名不規範，導致本地定義和伺服器欄位不同的情況。這種情況可以通過 @JsonKey 關鍵字，來修飾json欄位匹配新的本地變數。除此之外，也可以做其他修飾，例如變數不能為空等。

@JsonKey(name: 'id')
final int user_id;

現在專案中依然是報錯的，隨後我們在 flutter 工程的根目錄資料夾下，執行下面命令。

flutter packages pub run build_runner watch

此命令的好處在於，其會在後臺監聽模型類的定義，當模型類定義發生改變後，會自動修改本地原始碼以適配新的定義。以文中 User 類為例，當 User.dart 檔案發生改變後，使用 Cmd+s 儲存檔案，隨後VSCode會將自定改變 user.g.dart 檔案的定義，以適配新的變數定義。

系統檔案

主要檔案

• iOS檔案：iOS工程檔案
• Android：Android工程檔案
• lib：Flutter的dart程式碼
• assets：資原始檔夾，例如font、image等都可以放在裡面
• .gitignore：git忽略檔案

packages

這是一個系統檔案， Flutter 通過 .packages 檔案來管理一些系統依賴庫，例如 material 、 cupertino 、 widgets 、 animation 、 gesture 等系統庫就在裡面，這些主要的系統庫由 .packages 下的 flutter 統一管理，原始碼都在 flutter/lib/scr 目錄下。除此之外，還有一些其他的系統庫或系統資源都在 .packages 中。

yaml檔案

在 Flutter 中通過 pubspec.yaml 檔案來管理外部引用，包含本地資原始檔、字型檔案、依賴庫等依賴，以及應用的一些配置資訊。這些配置在專案中時，需要注意程式碼對其的問題，否則會導致載入失敗。

當修改 yaml 檔案的依賴資訊後，需要執行 flutter get packages 命令更新本地檔案。但並不需要這麼麻煩，可以直接 Cmd+s 儲存檔案，VSCode編譯器會自動更新依賴。

// 專案配置資訊
name: WeChat
description: Tencent WeChat App.
version: 1.0.0+1

// 常規依賴
dependencies:
flutter:125864
sdk: flutter
cupertino_icons: ^0.1.2
english_words: ^3.1.0

// 開發依賴
dev_dependencies:
flutter_test:
sdk: flutter

flutter:
uses-material-design: true
// 圖片依賴
assets:
- assets/images/ic_file_transfer.png
- assets/images/ic_fengchao.png

// 字型依賴
fonts:
- family: appIconFont
fonts:
- asset: assets/fonts/iconfont.ttf

Flutter開發

啟動函式

和大多數程式語言一樣， dart 也包含一個 main 方法，是 Flutter 程式執行的主入口，在 main 方法中寫的程式碼就是在程式啟動時執行的程式碼。 main 方法中會執行 runApp 方法， runApp 方法類似於iOS的 UIApplicationMain 方法， runApp 函式接收一個 Widget 用來做應用程式的顯示。

void main() {
runApp()
// code
}

生命週期

在iOS中通過 AppDelegate 可以獲取應用程式的生命週期回撥，在 Flutter 中也可以獲取到。可以通過向 Binding 新增一個 Observer ，並實現 didChangeAppLifecycleState 方法，來監聽指定事件的到來。

但是由於 Flutter 提供的狀態有限，在iOS平臺只能監聽三種狀態，下面是示例程式碼。

class LifeCycleDemoState extends State<MyHomePage> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}

@override
void didChangeAppLifecycleState(AppLifecycleState state) {
super.didChangeAppLifecycleState(state);

switch (state) {
case AppLifecycleState.inactive:
print('Application Lifecycle inactive');
break;
case AppLifecycleState.paused:
print('Application Lifecycle paused');
break;
case AppLifecycleState.resumed:
print('Application Lifecycle resumed');
break;
default:
print('Application Lifecycle other');
}
}
}

矩陣變換

在 Flutter 中是支援矩陣變化的，例如 rotate 、 scale 等方式。 Flutter 的矩陣變換由 Widget 完成，需要進行矩陣變換的檢視，在外面包一層 Transform Widget 即可，內部可以設定其變換方式。

child: Container(
child: Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: TextStyle(color: Colors.orange[300], fontSize: 12.0),
textAlign: TextAlign.center,
),
decoration: BoxDecoration(
color: Colors.red[400],
),
padding: EdgeInsets.all(16.0),
),
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
)

在 Transform 中可以通過 transform 指定其矩陣變換方式，通過 alignment 指定變換的錨點。

頁面導航

在iOS中可以通過 UINavigationController 對頁面進行管理，控制頁面間的push、pop跳轉。 Flutter 中使用 Navigator 和 Routers 來實現類似 UINavigationController 的功能， Navigator 負責管理導航棧，包含push、pop的操作，可以把 UIViewController 看做一個 Routers ， Routers 被 Navigator 管理著。

Navigator 的跳轉方式分為兩種，一種是直接跳轉到某個 Widget 頁面，另一種是為 MaterialApp 構建一個 map ，通過 key 來跳轉對應的 Widget 頁面。 map 的格式是 key : context 的形式。

void main() {
runApp(MaterialApp(
home: MyAppHome(), // becomes the route named '/'
routes: <String, WidgetBuilder> {
'/a': (BuildContext context) => MyPage(title: 'page A'),
'/b': (BuildContext context) => MyPage(title: 'page B'),
'/c': (BuildContext context) => MyPage(title: 'page C'),
},
));
}

跳轉時通過 pushNamed 指定 map 中的 key ，即可跳轉到對應的 Widget 。如果需要從push出來的頁面獲取引數，可以通過 await 修飾push操作，這樣即可在新頁面pop的時候將引數返回到當前頁面。

Navigator.of(context).pushNamed('/b');

Map coordinates = await Navigator.of(context).pushNamed('/location');
Navigator.of(context).pop({"lat":43.821757,"long":-79.226392});

編碼規範

VSCode有很好的語法檢查，如果有命名不規範等問題，都會以警告的形式表現出來。

1. 駝峰命名法，方法名、變數名等，都以首字母小寫的駝峰命名法。類名也是駝峰命名法，但類名首字母大寫。
2. 檔名，檔案命名以下劃線進行區分，不使用駝峰命名法。
3. Flutter 中建立 Widget 物件，可以用 new 修飾，也可以不用。

child: new Container(
child: Text(
'Hello World',
style: TextStyle(color: Colors.orange, fontSize: 15.0)
)
)

1. 函式中可以定義可選引數，以及必要引數。

下面是一個函式定義，這裡定義了一個必要引數 url ，以及一個 Map 型別的可選引數 headers 。

Future<Response> get(url, {Map<String, String> headers});

1. Dart 中在函式定義前加下劃線，則表示是私有方法或變數。
2. Dart 通過 import 引入外部引用，除此之外也可以通過下面的語法單獨引入檔案中的某部分。

import "dart:collection" show HashMap, IterableBase;

=>呼叫

在 Dart 中經常可以看到 => 的呼叫方式，這種呼叫方式類似於一種語法糖，下面是一些常用的呼叫方式。

當進行函式呼叫時，可以將普通函式呼叫轉換為 => 的呼叫方式，例如下面第一個示例。在此基礎上，如果呼叫函式只有一個引數，可以將其改為第二個示例的方式，也就是可以省略呼叫的括號，直接寫引數名。

(單一引數) => {函式宣告}
elements.map((element) => {
return element.length;
});

單一引數 => {函式宣告}
elements.map(element => {
 return element.length;
});

當只有一個返回值，並且沒有邏輯處理時，可以直接省略 return ，返回數值。

(引數1, 引數2, …, 引數N) => 表示式
elements.map(element => element.length);

當呼叫的函式中沒有引數時，可以直接省略引數，寫一對空括號即可。

() => {函式實現}

小技巧

程式碼重構

VSCode支援對 Dart 語言進行重構，一般作用範圍都是在函式內小範圍的。

例如在建立 Widget 物件的地方，將滑鼠焦點放在這裡，當前行的最前面會有提示。點選提示後會有下面兩個選項：

• Extract Local Variable

將當前 Widget 及其子 Widget 建立的程式碼，剝離到一個變數中，並在當前位置使用這個變數。

• Extract Method

將當前 Widget 及其子 Widget 建立的程式碼，封裝到一個函式中，並在當前位置呼叫此函式。

除此之外，將滑鼠焦點放在方法的一行，點選最前面的提示，會出現下面兩個選項：

• Convert to expression body

將當前函式轉換為一個表示式。

• Convert to async function body

將當前函式轉換為一個非同步執行緒中執行的程式碼。

附加效果

在 Dart 中新增任何附加效果，例如動畫效果或矩陣轉換，除了直接給 Widget 子類的屬性賦值外，就是在被當前 Widget 外面包一層，就可以使當前 Widget 擁有對應的效果。

// 動畫效果
floatingActionButton: FloatingActionButton(
tooltip: 'Fade',
child: Icon(Icons.brush),
onPressed: () {
controller.forward();
},
),

// 矩陣轉換
Transform(
child: Container(
child: Text(
"Lorem ipsum",
style: TextStyle(color: Colors.orange[300], fontSize: 12.0),
textAlign: TextAlign.center,
)
),
alignment: Alignment.center,
transform: Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
),

快捷鍵(VSCode)

• Cmd + Shift + p ：可以進行快速搜尋。需要注意的是，預設是帶有一個 > 的，這樣搜尋結果主要是 dart 程式碼。如果想搜尋其他配置檔案，或者安裝外掛等操作，需要把 > 去掉。
• Cmd + Shift + o ：可以在某個檔案中搜索某個類，但前提是需要提前進入這個檔案。例如進入 framework.dart ，搜尋 StatefulWidget 類。

注意點

• 使用 Flutter 要注意程式碼縮排，如果縮排有問題可能會影響最後的結果，尤其是在 .yaml 中寫配置檔案的時候。
• 因為 Flutter 是開源的，所以遇到問題後可以進入原始碼中，找解決方案。
• 在程式碼中要注意標點符號的使用，例如第二個建立 Stack 的程式碼，如果上面是以逗號結尾，則後面的建立會失敗，如果上面是以分號結尾則沒問題。

Widget unreadMsgText = Container(
width: Constants.UnreadMsgNotifyDotSize,
height: Constants.UnreadMsgNotifyDotSize,
child: Text(
conversation.unreadMsgCount.toString(),
style: TextStyle(
color: Color(AppColors.UnreadMsgNotifyTextColor),
fontSize: 12.0
),
),
);

avatarContainer = Stack(
overflow: Overflow.visible,
children: <Widget>[
avatar
],
);