Flutter入門教程(一)Flutter簡介

不知名前端李小白發表於2022-03-26

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

一、Flutter簡介?

Flutter是谷歌的移動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與其他跨平臺的移動開發技術比較:

技術型別UI渲染方式效能開發效率動態化框架代表
H5 + 原生 WebView渲染 一般 支援 Cordova、Ionic
JavaScript + 原生渲染 原生控制元件渲染 支援 RN、Weex
自繪UI + 原生 呼叫系統API渲染 Flutter高, Qt低 預設不支援 Qt、Flutter

二、採用Dart語言開發

採用Dart語言開發,顧名思義副檔名以 .dart 結尾。

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

?開發效率高

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

?高效能

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

?快速分配記憶體

型別安全和空安全

  • Dart 是型別安全的語言,支援靜態型別檢測,可以在編譯前發現一些型別的錯誤,並排除潛在問題
  • JavaScript 是一個弱型別語言,需要給JavaScriptdiamagnetic新增靜態型別檢測的擴充套件語言和工具

三、Flutter框架結構

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

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官網進行整理*****

相關文章