Flutter - 應用架構

在本章中，讓我們討論 Flutter 框架的架構。

Widget

Flutter 框架的核心概念是在 Flutter 中，一切皆為 Widget。Widget 基本上是用於建立應用程式使用者介面的使用者介面元件。

在Flutter中，應用程式本身就是一個 Widget。應用程式是頂級 Widget，其 UI 使用一個或多個子 Widget（Widget）構建，這些子 Widget 又使用其子 Widget 構建。此組合性功能幫助我們建立任何複雜程度的使用者介面。

例如，Hello World 應用程式（在上一章中建立）的 Widget 層次結構如下所示：

這裡以下幾點值得注意：

• MyApp 是使用者建立的 Widget，它使用 Flutter 原生 Widget MaterialApp 構建。

• MaterialApp 具有一個 home 屬性來指定主頁的使用者介面，它又是使用者建立的 Widget，MyHomePage。

• MyHomePage 使用另一個 Flutter 原生 Widget Scaffold 構建

• Scaffold 具有兩個屬性 – body 和 appBar

• body 用於指定其主要使用者介面，appBar 用於指定其標題使用者介面

• 標題 UI 使用 Flutter 原生 Widget AppBar 構建，主體 UI 使用 Center Widget 構建。

• Center Widget 具有一個屬性 Child，它引用實際內容，並且它使用 Text Widget 構建

手勢

Flutter Widget 透過一個特殊的 Widget GestureDetector 支援互動。GestureDetector 是一個不可見的 Widget，具有捕獲使用者互動（如點選、拖動等）其子 Widget 的能力。Flutter 的許多原生 Widget 都透過使用 GestureDetector 支援互動。我們還可以透過將現有 Widget 與 GestureDetector Widget 組合來將其整合到現有 Widget 中。我們將在以後的章節中單獨學習手勢。

狀態的概念

Flutter Widget 透過提供一個特殊的 Widget StatefulWidget 支援狀態維護。Widget 需要從 StatefulWidget Widget 派生以支援狀態維護，所有其他 Widget 都應該從 StatefulWidget 派生。Flutter Widget 在原生中是反應式的。這類似於 ReactJS，並且 StatefulWidget 只要其內部狀態發生變化就會自動重新渲染。透過查詢舊 Widget UI 和新 Widget UI 之間的差異並僅渲染必要的更改來最佳化重新渲染。

層

Flutter 框架最重要的概念是，框架根據複雜性被分組到多個類別中，並在複雜度遞減的層中清晰地排列。一層使用其緊鄰下一層構建。最頂層是特定於Android和iOS的 Widget。下一層包含所有 Flutter 原生 Widget。下一層是渲染層，它是低階渲染器元件，並渲染 Flutter 應用中的所有內容。層一直向下到核心平臺特定程式碼。

Flutter 中層的總體概述如下所示：

以下幾點總結了 Flutter 的架構：

• 在 Flutter 中，一切皆為 Widget，複雜的 Widget 由已存在的 Widget 組成。

• 必要時可以使用GestureDetector Widget 整合互動功能。

• 必要時可以使用StatefulWidget Widget 維護 Widget 的狀態。

• Flutter 提供分層設計，以便可以根據任務的複雜性對任何層進行程式設計。

我們將在以後的章節中詳細討論所有這些概念。