正如我前文說過，F(xiàn)lutter對(duì)于傳統(tǒng)前端來說跪解，或多或少會(huì)存在一些習(xí)慣不適應(yīng)的情況炉旷，但通過IDE、開源社區(qū)、使用時(shí)間過渡等輔助或調(diào)整窘行，往往也便能接受了饥追。
如果前篇開發(fā)環(huán)境很早前搭建的，在創(chuàng)建項(xiàng)目前罐盔，可以先跑一下命令檢查下環(huán)境但绕，看看有沒有新版本更新的，否則跳過這一步：
flutter doctor
創(chuàng)建項(xiàng)目
正式創(chuàng)建項(xiàng)目惶看，執(zhí)行命令：
flutter create music_story
等待一會(huì)捏顺，項(xiàng)目就會(huì)創(chuàng)建成功，速度還是比較快的纬黎。運(yùn)行命令看下效果：
cd music_story && flutter run
如果有連接設(shè)備（真機(jī)或模擬器），就會(huì)在設(shè)備中運(yùn)行挪凑，如果提示你信息：No connected devices.瓮孙，表示你沒有連接設(shè)備，這時(shí)可以運(yùn)行提示的命令：
flutter emulators
會(huì)提示如下內(nèi)容：
其中注意下方提示：
- 如果要運(yùn)行一個(gè)模擬器，則執(zhí)行
flutter emulators --launch <emulator id>;- 如果要?jiǎng)?chuàng)建一個(gè)模擬器，則執(zhí)行
flutter emulators --create [--name xyz].
由于我以前原生Android項(xiàng)目就創(chuàng)建過AVD，所以截圖把它們都羅列出來了衙伶，平常執(zhí)行第一條命令即可慌随，對(duì)于IOS來說花嘶，它有通用的Simulator隘击，它可以指定具體的設(shè)備型號(hào)棵红，默認(rèn)是最新型號(hào)IPhone XR。
因?yàn)槲沂荕ac，所以習(xí)慣使用下面命令即可看到運(yùn)行界面：
flutter emulators --launch apple_ios_simulator
flutter run
如果想指定運(yùn)行的平臺(tái)根欧，可以指定參數(shù)：
flutter run -d android
flutter run -d iPhone
也可以同時(shí)運(yùn)行：
flutter run -d all
此時(shí)默認(rèn)是以Debug模式運(yùn)行的，而Debug和Release性能體驗(yàn)相差比較大。Release模式（只能在真機(jī)上運(yùn)行，不能在模擬器上運(yùn)行）是給最終的用戶使用的，它關(guān)閉了所有調(diào)試內(nèi)容，優(yōu)化了啟動(dòng)、執(zhí)行速度蕉陋，減小包體積缩举，所以想看看實(shí)際性能可敲下面命令運(yùn)行Release模式杠氢，此時(shí)右上角的Debug標(biāo)簽會(huì)去掉：
flutter run --release
而如果需要發(fā)布，可以使用flutter build命令進(jìn)行構(gòu)建堕汞，如下面命令創(chuàng)建release版本（flutter build默認(rèn)為--release）：
flutter build ios
flutter build apk
因?yàn)橹С譄嶂剌d的，所以更新代碼后按“r”能直接刷新界面顾翼。
我們?cè)賮砜聪马?xiàng)目的目錄結(jié)構(gòu)：
其中android和ios是最終的應(yīng)用項(xiàng)目冯遂，有原生開發(fā)經(jīng)驗(yàn)的可以直接操作它們，而沒有原生經(jīng)驗(yàn)的也不能擔(dān)心，因?yàn)榛揪秃?code>lib這個(gè)目錄打交道，需要原生特定功能的，使用第三方插件即可，當(dāng)前第三方插件數(shù)量應(yīng)付一般需求也夠用了件豌。
觀察項(xiàng)目
然后我們?cè)賮韲^一下構(gòu)建UI方式壁顶，打開main.dart：
它不是XML風(fēng)格的層次標(biāo)簽格式蚁飒，所以對(duì)于前端來說不少人會(huì)不習(xí)慣，覺得是代碼式創(chuàng)建界面，是UI布局的退步匈棘，更像是給后端人員使用的，也有人建議Flutter開發(fā)團(tuán)隊(duì)提供類似JSX風(fēng)格的構(gòu)建方式鸟蟹，但是都婉拒了，說這樣構(gòu)建更靈活槐壳，想要這功能，留待開源社區(qū)支持海诲，有興趣可以看這兩個(gè)issues:
https://github.com/flutter/flutter/issues/11609
https://github.com/flutter/flutter/issues/15922
那開源社區(qū)有沒有呢拍嵌？我找了一下划纽，還真有一個(gè)還可以的：
flutter-view退敦，可以使用Pug/HTML和Sass/CSS構(gòu)建UI布局，Github地址胀葱，有興趣可以了解一下，后續(xù)可能專門寫一篇關(guān)于它的芳杏。
當(dāng)前篇幅有點(diǎn)過長了，暫停并留待下篇繼續(xù)郭膛。
布局組件和普通UI組件同樣方式使用则剃，所以建議先熟悉一輪所有布局組件，此外不要做單一太多層級(jí)的組件，不然太多“}”看到頭暈艘绍，應(yīng)該把大組件拆分成各個(gè)小組件航夺，加上IDE的智能提示彻亲，可讀性就會(huì)較為提高畸肆，但總感覺可預(yù)估性難把握，如本來是個(gè)簡單組件宙址，加個(gè)border和居中就要變成大組件了…
