Mac最新Flutter環境搭建運行和對比理解聲明式UI
前言
這段時間一直都在學習和寫關於SwiftUI的東西，前面也總結了四篇文章來大體上說了下Demo中功能實現的一些細節，後面準備開始了解學習一下Flutter，爭取在年前能再用Flutter寫一份項目Demo 出來，這個事在進行中，有需要的小夥伴可以關注一下後續的文章，今天先從概念性和環境搭建運行出發，也是對這段時間通過SwiftUI的學習對聲明式UI的理解來說說它到底是啥，希望能更好的理解一下聲明式UI這個概念。
這篇也順便總結一下Flutter環境的搭建，以及我踩得那些坑。
Flutter環境搭建
1、先下載你需要的 Flutter SDK 資源，建議下載後換個位置保存，我們下載的文件都在這，容易被我們誤操作刪除掉，我是放在的文稿下面的。 Flutter SDK下載地址
2、編輯環境變量 （這一步容易卡住）
① 我們需要編輯 bash_profile 文件, 你可以直接在終端中執行命令： open ~/.bash_profile （要你是打開這文件沒法直接編輯，是鎖住的就需要帶權限打開，我們直接在終端編輯，執行：sudo vim ~/.bash_profile ）
② 接下來把下面三行直接寫着上面文件的最後面
export PATH=你下載文件所在目錄的路徑/flutter/bin:$PATH export FLUTTER_STORAGE_BASE_URL=//storage.flutter-io.cn export PUB_HOSTED_URL=//pub.flutter-io.cn
NOTE:
* ：Flutter 文件的路徑建議直接把你的Flutter文件直接拉到你終端中，別自己去寫了，容易出問題，注意拉到時候防止前後產生多餘的符號。
**：要是你的bash_profile文件中有別的內容也需要特備註意，你可以使用 env 命令檢查一下對不對（留意裏面的PATH，正確的應該是上面的你配置格式的PATH）
***：你也可以使用 cat ~/.bash_profile 檢查你配置的PATH
③ 接下來保存退出，執行 source ~/.bash_profile
④ 使用這個命令檢查你的配置 flutter doctor
NOTE： zsh 的還要加上 source ~/.bash_profile ，要好奇什麼是 zsh 可以上網了解一下哈。
3、安裝Xcode 這個就沒啥好說的了。建議後面的幾個工具安裝用醫生檢查的時候多重啟終端檢查
4、安裝 VSCode VSCode官網地址
這個說明一下它下載很慢的問題，這裡有一篇知乎文章有給我們完美的解決方式，速度嗖嗖的 ~ 國內下載vscode速度慢問題解決
接下來就是安裝 Flutter插件了，具體的搜索安裝位置我截了圖在下面：
5、安裝 Android Studio
這裡踩了幾個坑，原本我安裝的是比較早的版本的，具體的我忘記了，我想着順便升級一下，結果就掉坑裡了。首先說一點 目前最新的4.1版本對 Flutter支持不會是很好，所以不建議下載這個版本，我下載之後用上面的命令檢查一直報下面的問題：
建議大家下載4.1之前的版本，可以去這裡下載 下載其他版本Android Studio
還有一點需要注意的就是 Flutter SDK 的版本也是會匹配 Android SDK 的版本的，具體的匹配多少我們就不說了，你可以使用 flutter doctor 幫你檢查出來。
完了之後你還是需要安裝 Flutter 和 Dair 插件的，具體的搜索安裝位置如下圖，做安卓的小夥伴知道 Plugins 的，怕別的不太清楚。
這樣一頓操作之後基本上也就完成了整個配置過程，最後還是記得多用醫生幫你檢查，最後成功的截圖是：
6、運行你的Flutter項目
我安裝的Flutter版本上面能看的出來，在這個版本下是不在需要去修改將 repositories 中的 google() 和 jcenter() 的，在你創建了項目之後你改一下項目中Android->build.gradle的配置就行了，將裏面的 google() 和 jcenter() 改成下面：
maven { url 『//maven.aliyun.com/repository/google』 }
maven { url 『//maven.aliyun.com/repository/jcenter』 }
maven { url 『//maven.aliyun.com/nexus/content/groups/public』 }
接下來就是創建Flutter項目：
1、通過終端命令創建：
flutter create 項目名稱 cd 項目路徑
2、直接VSCode創建，具體的操作看下圖：
* ： View -> Command Platte
**：輸入 Flutter 選擇 New Application Project
接下來在終端中連接一下你的模擬器（夜神自己官網下載），輸入下面命令
adb connect 127.0.0.1:62001
最後執行
flutter run
我這裡是選擇用了VSCode編寫代碼，你可以在VSCode直接選擇你要運行的機器，右下角選擇（沒選擇是No Device）,然後右上角 Start Debugging
這裡再提一句，要是你再運行多次之後還沒運行起來，然後報錯信息如下：
Waiting for another flutter command to release the startup lock...
由於這個問題我遇到了，解決方式如下：
打開Flutter安裝目錄 /bin/cache ,刪除 lockfile 文件即可。
下面是創建的Flutter項目改了下導航標題在iOS模擬器上的運行結果：
這樣我們基本上就總結好了Flutter項目環境的搭建以及它的運行。其實在上面改這個導航標題的時候也體驗到了 Flutter 熱重載功能（和SwiftUI的Canves一樣），實時預覽的確是一個對開發者比較友好的東西。接下來我們就通過基本的Flutter代碼以及SwiftUI代碼對比來總結一下聲明式UI。
對比理解聲明式UI
首先我覺得我們得清楚什麼是 命令式UI 才能更好地理解聲明式 UI ，以前在知乎上看到一個比較好的回答，看下面這個例子。
我們先不管什麼是聲明式和命令式，我們就先考慮一個問題，正常用Swift寫或者OC寫應該怎麼寫，大概的步驟是這樣的：
1、創建一個開關控件（UISwitch）添加到控制器View上，並且添加事件，再給它左邊添加一個UILabel 顯示「控制開關」，
2、創建一個UILabel，在開關關閉的時候設置 Label 的內容為「控制開關已關閉」 並且設置字體顏色為紅色，在開關打開的時候設置 Label 的內容為「控制開關已打開」 並且設置字體顏色為綠色。
那我們用SwiftUI該怎麼寫呢？大概的過程是這樣的：
1、聲明一個@State變量為Bool類型
2、聲明一個Toggle控件，isOn 綁定前面聲明的@State變量，label 內容設置 Text(“控制開關”)
3、聲明一個Text，讓它在前面最開始聲明的@State變量在等於 false 狀態下內容為 「控制開關已關閉」 ，在等於 true 狀態下內容為 「控制開關已打開」，顏色也是相同的道理，具體代碼如下：
@State var textState:Bool
var body: some View {
VStack{
Toggle(isOn: $textState) {
Text("控制開關")
.foregroundColor(.orange)
}.frame(width: 140, height: 50)
Text(textState == false ? "控制開關已關閉" : "控制開關已打開")
.foregroundColor(textState == false ? .red : .green)
}
}
然後…… 就結束了！好好仔細的理解一下上面兩種方式的區別：
第一種：通過開關的事件你得去主動的改變Label的內容和字體顏色，這就是發出的命令，也就是命令式UI。
第二種：你根本不許需要關心Toggle的事件，也不用主動的發出命令去改變，你去要做的只是在創建各個控件的時候告訴它們在不同狀態下你們該展示什麼內容！這就是聲明式UI。
仔細體會一下這兩種方式之間的區別，我覺得還是比較好理解的。應該不困難！理解它們能更好的在後面的學習中幫助和指導我們。避免在想法上產生固話的東西把自己繞進去。
參考文章：
