Flutter入門教程（一）Flutter簡介

• 2022 年 3 月 26 日
• 筆記
• Flutter, 移動端開發

這是Flutter系列第一篇文章，後續會持續更新Flutter相關知識，本篇就主要對於Flutter技術做一個簡單的入門介紹

一、Flutter簡介🔥

Flutter是Google的移動UI框架，可以快速在iOS和Android上構建高品質的原生用戶介面。 Flutter可以與現有的程式碼一起工作。在全世界，Flutter正在被越來越多的開發者和組織使用，並且Flutter是完全免費、開源的，可以用一套程式碼同時構建Android和iOS應用，性能可以達到原生應用一樣的性能。

一句話總結就是：Flutter是一個跨平台、高性能的移動UI框架

🔴跨平台

Flutter使用自己的高性能渲染引擎來繪製 Widget([ˈwɪdʒɪt])，這樣可以保證在 Android 和iOS 上 UI 的一致性，目前 Flutter 已經支援 iOS、Android、Web、Windows、macOS、Linux、Fuchsia（Google新的自研作業系統）等眾多平台。

🟠高性能

Flutter的高性能主要靠兩點來保證：

• 採用 Dart 語言開發
• 使用自己的渲染引擎來繪製 UI 

Dart語言在JIT模式下，執行速度與 JavaScript 基本持平。但是它支援AOT，以 AOT模式運行時，JavaScript 便遠遠追不上了，執行效率也就大大提升。並且Flutter使用自己的渲染引擎繪製UI，布局數據都由Dart語言直接控制，性能開銷比較可觀

下面看看Flutter與其他跨平台的移動開發技術比較：

二、採用Dart語言開發

採用Dart語言開發，顧名思義文件擴展名以 .dart 結尾。

Flutter為什麼會選擇 Dart 語言而不選擇我們前端鮮為人知的 JavaScript 呢？

🔴開發效率高

• Flutter 在開發階段採用，採用 JIT 模式，這樣就避免了每次改動都要進行編譯，極大的節省了開發時間
• Flutter 在發布時可以通過 AOT 生成高效的機器碼以保證應用性能。而 JavaScript 則不具有這個能力

🟠高性能

• Flutter 中能夠在每個動畫幀中運行大量的程式碼。這意味著需要一種既能提供高性能的語言，而不會出現會丟幀的周期性暫停，而 Dart 支援 AOT，在這一點上可以做的比 JavaScript 更好

🟡快速分配記憶體

類型安全和空安全

• Dart 是類型安全的語言，支援靜態類型檢測，可以在編譯前發現一些類型的錯誤，並排除潛在問題
• JavaScript 是一個弱類型語言，需要給JavaScriptdiamagnetic添加靜態類型檢測的擴展語言和工具

三、Flutter框架結構

 這裡對Flutter的框架做一個整體介紹，可以有個整體印象

 簡單來講，Flutter 從上到下可以分為三層：框架層、引擎層和嵌入層

🔴框架層

• 底下兩層被合併為一個dart UI層，對應的是Flutter中的dart:ui包，它是 Flutter Engine 暴露的底層UI庫，提供動畫、手勢及繪製能力。
• Rendering 渲染層，依賴於 Dart UI 層，渲染層會構建一棵由可渲染對象的組成的渲染樹，當動態更新這些對象時，渲染樹會找出變化的部分，然後更新渲染。渲染層可以說是Flutter 框架層中最核心的部分，它除了確定每個渲染對象的位置、大小之外還要進行坐標變換、繪製（調用底層 dart:ui ）。
• Widgets 層是 Flutter 提供的的一套基礎組件庫，在基礎組件庫之上，Flutter 還提供了 Material 和 Cupertino 兩種視覺風格的組件庫，它們分別實現了 Material 和 iOS 設計規範。

🟠引擎層

引擎層是Flutter的核心，由C++實現，其中包括了 Skia 引擎、Dart 運行時、文字排版引擎等。在程式碼調用 dart:ui庫時，調用最終會走到引擎層，然後實現真正的繪製和顯示

🟡嵌入層

嵌入層主要是將 Flutter 引擎 」安裝「 到特定平台上，Flutter 程式碼可以通過嵌入層，以模組方式集成到現有的應用中，也可以作為應用的主體

Flutter基礎介紹就到這裡，下一篇講解Flutter開發環境搭建~~

*****注意🔺：本系列均參照Flutter官網進行整理*****