Flutter學習-熱過載

前言

上一篇文章Flutter學習-基礎元件Widgets中學習了使用Container來構建一個app頁面，此時如果需要修改除錯，不需要再次執行，有一個簡便的方式就是使用熱過載。

什麼是熱過載

所謂熱過載就是頁面每次改動,不需要手動去重新整理,可自動重新整理。即支援開發過程中熱過載。很多跨平臺方案框架，如Vuex都是支援熱過載的，而我們學習這個Flutter,當然也是支援。
Flutter的熱過載原理：
通過將更新後的原始碼檔案注入正在執行的Dart虛擬機器（VM）中來實現熱過載。在虛擬機器使用新的的欄位和函式更新類後，Flutter框架會自動重新構建widget樹，以便您快速檢視更改的效果。
參考官網：

怎麼使用

要熱過載一個Flutter應用程式:

從受支援的IntelliJ IDE或終端視窗執行應用程式。物理機或虛擬器都可以執行。
修改專案中的一個Dart檔案。大多數型別的程式碼更改可以重新載入;（PS：但是還是有限制的，一些資料無法進行熱過載，只能重新執行程式。）
第一次執行應用到裝置後如下圖所示：（使用上一篇文章Flutter學習-基礎元件Widgets的demo測試）

現在修改程式碼，將文字this is a container修改為this is a container hot reload；

import 'package:flutter/material.dart';

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new Container(        alignment: new Alignment(1.0,1.0),
      color: Colors.red,
      width: 500,
      height: 600,
      padding: new EdgeInsets.all(110),
      constraints: new BoxConstraints(),
      child: new Text("this is a container",
          textDirection: TextDirection.ltr),

    );
  }
}
 

然後點選工具欄上的Hot Reload，此時會將修改的程式碼執行到裝置。
Android studio中點選工具欄圖示如下：

執行後，此時終端日誌輸出如下：

Reloaded 1 of 419 libraries in 1,179ms.表示熱載入時間僅僅1秒多。
效果如下：

總結

如上過程就是一個熱載入的使用過程，可以看到的優點就是減少了開發除錯時間，能幫助開發更快的進行佈局、程式碼邏輯修改驗證等。
但是，熱過載不是萬能的，對於熱過載存在一些程式碼無法實現，如靜態欄位等，所以要根據實際來判斷是否使用熱過載。