Mac最新Flutter環境搭建運行和對比理解聲明式UI

 

前言

---

 

      這段時間一直都在學習和寫關於SwiftUI的東西，前面也總結了四篇文章來大致上說了下Demo中功能實現的一些細節，後面準備開始瞭解學習一下Flutter，爭取在年前能再用Flutter寫一份項目Demo 出來，這個事在進行中，有須要的小夥伴能夠關注一下後續的文章，今天先從概念性和環境搭建運行出發，也是對這段時間經過SwiftUI的學習對聲明式UI的理解來講說它究竟是啥，但願能更好的理解一下聲明式UI這個概念。

      這篇也順便總結一下Flutter環境的搭建，以及我踩得那些坑。  

 

Flutter環境搭建

---

 

      一、先下載你須要的 Flutter SDK 資源，建議下載後換個位置保存，咱們下載的文件都在這，容易被咱們誤操做刪除掉，我是放在的文稿下面的。  Flutter SDK下載地址

      二、編輯環境變量 （這一步容易卡住） 

      ① 咱們須要編輯 bash_profile 文件, 你能夠直接在終端中執行命令： open ~/.bash_profile （要你是打開這文件無法直接編輯，是鎖住的就須要帶權限打開，咱們直接在終端編輯，執行：sudo vim ~/.bash_profile ）

      ② 接下來把下面三行直接寫着上面文件的最後面

export PATH=你下載文件所在目錄的路徑/flutter/bin:$PATH
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PUB_HOSTED_URL=https://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 能夠上網瞭解一下哈。

      三、安裝Xcode  這個就沒啥好說的了。建議後面的幾個工具安裝用醫生檢查的時候多重啓終端檢查

      四、安裝 VSCode   VSCode官網地址

      這個說明一下它下載很慢的問題，這裏有一篇知乎文章有給咱們完美的解決方式，速度嗖嗖的 ~  國內下載vscode速度慢問題解決

      接下來就是安裝 Flutter插件了，具體的搜索安裝位置我截了圖在下面：

 

 

      五、安裝 Android Studio

      這裏踩了幾個坑，本來我安裝的是比較早的版本的，具體的我忘記了，我想着順便升級一下，結果就掉坑裏了。首先說一點 目前最新的4.1版本對 Flutter支持不會是很好，因此不建議下載這個版本，我下載以後用上面的命令檢查一直報下面的問題：

 

 

      建議你們下載4.1以前的版本，能夠去這裏下載   下載其餘版本Android Studio

      還有一點須要注意的就是 Flutter SDK 的版本也是會匹配 Android SDK 的版本的，具體的匹配多少咱們就不說了，你可使用 flutter doctor 幫你檢查出來。

      完了以後你仍是須要安裝 Flutter 和 Dair 插件的，具體的搜索安裝位置以下圖，作安卓的小夥伴知道 Plugins 的，怕別的不太清楚。

 

 

      這樣一頓操做以後基本上也就完成了整個配置過程，最後仍是記得多用醫生幫你檢查，最後成功的截圖是：

 

      六、運行你的Flutter項目

      我安裝的Flutter版本上面能看的出來，在這個版本下是不在須要去修改將 repositories 中的 google() 和 jcenter() 的，在你建立了項目以後你改一下項目中Android->build.gradle的配置就好了，將裏面的 google() 和 jcenter() 改爲下面：

maven { url ‘https://maven.aliyun.com/repository/google’ }
maven { url ‘https://maven.aliyun.com/repository/jcenter’ }
maven { url ‘http://maven.aliyun.com/nexus/content/groups/public’ }

      接下來就是建立Flutter項目：

      一、經過終端命令建立：

flutter create  項目名稱
cd 項目路徑

      二、直接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寫應該怎麼寫，大概的步驟是這樣的：

      一、建立一個開關控件（UISwitch）添加到控制器View上，而且添加事件，再給它左邊添加一個UILabel 顯示「控制開關」，

      二、建立一個UILabel，在開關關閉的時候設置 Label 的內容爲「控制開關已關閉」 而且設置字體顏色爲紅色，在開關打開的時候設置  Label 的內容爲「控制開關已打開」 而且設置字體顏色爲綠色。

      那咱們用SwiftUI該怎麼寫呢？大概的過程是這樣的：

      一、聲明一個@State變量爲Bool類型

      二、聲明一個Toggle控件，isOn 綁定前面聲明的@State變量，label 內容設置 Text("控制開關")

      三、聲明一個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。

      仔細體會一下這兩種方式之間的區別，我以爲仍是比較好理解的。應該不困難！理解它們能更好的在後面的學習中幫助和指導咱們。避免在想法上產生固話的東西把本身繞進去。

 

      參考文章：

      一、Flutter 中文網

      二、Mac系統下配置Flutter環境

      三、從 SwiftUI 談聲明式 UI 與類型系統

      四、聲明式 UI 介紹