Flutter簡介
Flutter是谷歌的移動UI框架，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面，F(xiàn)lutter是完全免費、開源的。Flutter組件采用現(xiàn)代響應(yīng)式框架構(gòu)建，這是從React中獲得的靈感，中心思想是用組件(widget)構(gòu)建UI。
框架組成
Flutter包括一個現(xiàn)代的響應(yīng)式框架、一個2D渲染引擎、現(xiàn)成的widget和開發(fā)工具。這些組件可以幫助您快速地設(shè)計、構(gòu)建、測試和調(diào)試應(yīng)用程序。Flutter的核心思想是一切皆為widget。
Flutter框架是一個分層的結(jié)構(gòu)，每個層都建立在前一層之上。
Android：底層引擎是C++代碼通過Android的NDK編譯，上層通過Dart編譯器編譯，以native code方式運行;
iOS：底層引擎是C++代碼通過LLVM編譯，上層通過AOT-compiled，也是以native code方式運行;
Flutter核心理念
Flutter組件采用函數(shù)式響應(yīng)框架構(gòu)建，組件鑒于當(dāng)前的配置和狀態(tài)來描述視圖，組件狀態(tài)發(fā)生改變，組件會重構(gòu)其配置和狀態(tài)。然后底層框架會將最新的配置和狀態(tài)與先前的做對比，由此產(chǎn)生一個最小的差值，并由此差值來決定底層渲染樹從舊狀態(tài)過度到新狀態(tài)。
熱加載模式
Flutter是采用熱加載模式的，hot reload的原理是插樁，debug模式下，對每一個方法和成員進(jìn)行插樁，運行期間reload就生效了，無需重新安裝。注：全局變量初始化、靜態(tài)成員初始化、main方法不能熱加載。
Material和Cupertino
Flutter 內(nèi)置了對Material（默認(rèn)，安卓樣式）和Cupertino (iOS-flavor)的 UI 組件庫。提供了可定制的 UI 組件，不再受制于OEM控件的限制。
Widget
Widget 是每個 Flutter 應(yīng)用的基礎(chǔ)。Flutter 具有一致的、唯一的對象模型—— Widget。Widget 通過組合來組成層級結(jié)構(gòu)。每個 Widget 都內(nèi)嵌在父 Widget 中，并繼承父 Widget 的屬性。
Flutter安裝
必要環(huán)境
- Git環(huán)境
Mac安裝Flutter SDK
// 修改成國內(nèi)鏡像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
// 克隆flutter sdk
git clone -b dev https://github.com/flutter/flutter.git
// 配置環(huán)境變量
open ~/.bash_profile
// 添加flutter的環(huán)境變量
export PATH="路徑/flutter/bin:$PATH"
// 保存配置文件
source ~/.bash_profile
// 運行flutter命令
flutter -h
flutter doctor
Windows安裝Flutter SDK，同上
- 配置環(huán)境變量（用戶變量）：
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
- 克隆bate分支到系統(tǒng)路徑中：
git clone -b beta https://github.com/flutter/flutter.git
- 將克隆下來的項目bin目錄配置到環(huán)境變量Path中；
- 運行flutter命令；
安裝鏈接設(shè)備工具
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
更新Flutter的版本
終端執(zhí)行命令：flutter upgrade
VSCode安裝插件
需要安裝的插件：Flutter（會自動安裝Dart）
創(chuàng)建項目和運行項目
進(jìn)入vscode -> 查看 -> 命令面板操作，快捷鍵：cmd+shift+p
cmd+shift+p -> Flutter: new project -> 輸入項目名稱
cmd+shift+p -> Debug:Select and Start Debugging -> Flutter -> 運行項目
vscode的快捷鍵
vscode終端下執(zhí)行操作：
R鍵：點擊后熱加載，預(yù)覽效果
P鍵：在虛擬機(jī)中顯示網(wǎng)格
O鍵：切換Android和iOS的預(yù)覽模式
Q鍵：退出調(diào)試預(yù)覽模式
其他快捷鍵：
Shift+Alt+F： 對齊代碼
Dart語言基礎(chǔ)
Dart簡介
Dart是Google發(fā)布的開源編程語言，面向?qū)ο蟮恼Z言，可用于全平臺開發(fā)，適用于Web開發(fā)，跨平臺移動應(yīng)用開發(fā)，腳本或者服務(wù)端開發(fā)。
Dart數(shù)據(jù)類型和方法
- 變量聲明使用var； final聲明一個不可修改的變量；
- 常量聲明使用const，必須是編譯器常量；
- final和const的區(qū)別：
- Dart的數(shù)據(jù)類型：Number（Int、double）、String、Boolean、List、Map、Runes、Symbols；
- Dart中的方法可選參數(shù)有兩種形式：根據(jù)命名({})和根據(jù)位置([])；可選參數(shù)必須在具體參數(shù)后面；
- 匿名方法可賦值給變量，通過變量進(jìn)行引用；
- 閉包和js類似，是一個方法（對象），定義在其他方法內(nèi)部，可以訪問外部方法內(nèi)的局部變量；
Scaffold腳手架
目的是幫助開發(fā)者快速構(gòu)建APP；Scaffold 實現(xiàn)了基本的 Material Design 布局結(jié)構(gòu)。
Scaffold 有下面幾個主要屬性：
- appBar - 顯示在界面頂部的一個 AppBar。
- body - 當(dāng)前界面所顯示的主要內(nèi)容 Widget。
- floatingActionButton - Material 設(shè)計中所定義的 FAB，界面的主要功能按鈕。
- persistentFooterButtons - 固定在下方顯示的按鈕，比如對話框下方的確定、取消按鈕。
- drawer - 抽屜菜單控件。
- backgroundColor - 內(nèi)容的背景顏色，默認(rèn)使用的是 ThemeData.scaffoldBackgroundColor 的值。
- bottomNavigationBar - 顯示在頁面底部的導(dǎo)航欄。
- resizeToAvoidBottomPadding - 類似于 Android 中的android:windowSoftInputMode='adjustResize'，控制界面內(nèi)容 body 是否重新布局來避免底部被覆蓋了，比如當(dāng)鍵盤顯示的時候，重新布局避免被鍵盤蓋住內(nèi)容。默認(rèn)值為 true。
Flutter布局
Layout結(jié)構(gòu)
- Single-child layout widgets：父級widget中只能包含唯一一個子級widget主要有： Contrainer、Padding、Center等；
- Multi-child layout widgets：父級widget中能包含多個子級widget主要有： Row、Column等；默認(rèn)支持flex布局；
Flutter組件
flutter提供的UI庫： Material-UI庫
TextWidget
- textAlign：對齊方式
- maxLines：最大行數(shù)
- overflow：溢出效果（無效果、省略號效果、漸變效果）
持續(xù)更新。。。
