Flutter學習筆記(一) 前期準備

官網:flutter.dev/docspython

環境:瀏覽器

AndroidStudio 3.3.1框架

FlutterSdk 1.2.1函數

1、簡介

Flutter 是 Google推出並開源的移動應用開發框架,主打跨平臺、高保真、高性能。開發者能夠經過 Dart語言開發 App,一套代碼同時運行在 iOS 和 Android平臺。Flutter使用本身的高性能渲染引擎來繪製widget,Flutter使用Skia做爲其2D渲染引擎,Skia是Google的一個2D圖形處理函數庫,包含字型、座標轉換,以及點陣圖都有高效能且簡潔的表現,Skia是跨平臺的。佈局

因爲Android系統已經內置了Skia,因此Flutter在打包APK(Android應用安裝包)時,不須要再將Skia打入APK中,但iOS系統並未內置Skia,因此構建iPA時,也必須將Skia一塊兒打包,這也是爲何Flutter APP的Android安裝包比iOS安裝包小的主要緣由。性能

Flutter高性能主要靠兩點來保證,首先,Flutter APP採用Dart語言開發。Dart在 JIT(即時編譯 Just-in-time)模式下,速度與 JavaScript基本持平。可是 Dart支持 AOT(靜態編譯 Ahead of time),當以 AOT模式運行時,JavaScript便遠遠追不上了。速度的提高對高幀率下的視圖數據計算頗有幫助。其次,Flutter使用本身的渲染引擎來繪製UI,佈局數據等由Dart語言直接控制,因此在佈局過程當中不須要像RN那樣要在JavaScript和Native之間通訊,這在一些滑動和拖動的場景下具備明顯優點,由於在滑動和拖動過程每每都會引發佈局發生變化,因此JavaScript須要和Native之間不停的同步佈局信息,這和在瀏覽器中要JavaScript頻繁操做DOM所帶來的問題是相同的,都會帶來比較可觀的性能開銷。動畫

程序主要有兩種運行方式:靜態編譯與動態解釋。靜態編譯的程序在執行前所有被翻譯爲機器碼,一般將這種類型稱爲AOT (Ahead of time)即 「提早編譯」;而解釋執行的則是一句一句邊翻譯邊運行,一般將這種類型稱爲JIT(Just-in-time)即「即時編譯」。AOT程序的典型表明是用C/C++開發的應用,它們必須在執行前編譯成機器碼,而JIT的表明則很是多,如JavaScript、python等。ui

基於JIT的快速開發週期:Flutter在開發階段採用,採用JIT模式,這樣就避免了每次改動都要進行編譯,極大的節省了開發時間; 基於AOT的發佈包: Flutter在發佈時能夠經過AOT生成高效的ARM代碼以保證應用性能。而JavaScript則不具備這個能力。插件

2、框架結構

Flutter Framework 一個純 Dart實現的 SDK,它實現了一套基礎庫,自底向上,咱們來簡單介紹一下:

  • 底下兩層(Foundation和Animation、Painting、Gestures)在Google的一些視頻中被合併爲一個dart UI層,對應的是Flutter中的dart:ui包,它是Flutter引擎暴露的底層UI庫,提供動畫、手勢及繪製能力。
  • Rendering層,這一層是一個抽象的佈局層,它依賴於dart UI層,Rendering層會構建一個UI樹,當UI樹有變化時,會計算出有變化的部分,而後更新UI樹,最終將UI樹繪製到屏幕上,這個過程相似於React中的虛擬DOM。Rendering層能夠說是Flutter UI框架最核心的部分,它除了肯定每一個UI元素的位置、大小以外還要進行座標變換、繪製(調用底層dart:ui)。
  • Widgets層是Flutter提供的的一套基礎組件庫,在基礎組件庫之上,Flutter還提供了 Material 和Cupertino兩種視覺風格的組件庫。而咱們Flutter開發的大多數場景,只是和這兩層打交道。 Flutter Engine

Flutter Engine 這是一個純 C++實現的 SDK,其中包括了 Skia引擎、Dart運行時、文字排版引擎等。在代碼調用 dart:ui庫時,調用最終會走到Engine層,而後實現真正的繪製邏輯。翻譯

3、環境安裝

  1. Download Flutter SDK
  2. 設置環境變量Path
  3. 安裝Android Studio 3.0或更高版本
  4. 安裝Flutter和Dart插件 安裝Flutter時,會提示安裝Dart,選擇安裝便可。
  5. 重啓AndroidStudio,就能夠建立Flutter工程。

4、開始Flutter體驗

  1. 建立Flutter Application
  2. Project的默認結構,應用程序代碼位於:lib/main.dart
  3. 運行
  4. Hot Reload
相關文章
相關標籤/搜索