Flutter開發初探

Jeff.Zhong發表於2020-06-26

目前跨端開發比較熱門的就是 React NativeFlutter 了,到底該選哪門技術似乎也快成了大前端圈的一個熱門話題。對於web前端來說,基於web生態的 React Native 應該是一個更加順暢而自然的選擇;但 Flutter 讓人動心的地方就是高效能和 跨端UI一致性。而React Native 發展不太明朗和 Flutter 越發成熟的走勢對比促使我從觀望的心態轉為加入 Flutter

這裡主要就是記錄一下學習Flutter的一些感想和看法:

  • 包管理
  • 佈局和樣式
  • json
  • 狀態管理

包管理

pubspec.yaml 檔案的作用類似於 npmpackage.json ,而yaml格式也比json方便。但是不能用命令列自動安裝包卻讓習慣了npm的我覺得麻煩。因為Flutter 安裝依賴包是這麼一個流程:

  1. 開啟pub.dev網站;
  2. 搜尋需要的包,得到包的名稱和版本;
  3. 把包名稱和版本填入pubspec.yaml,最後才開始下載包。

我覺得應該直接命令列安裝包,讓它幫我們下載,名稱版本自動寫入pubspec.yaml。如果沒有指定版本就是預設下載最新版本,因為很多時候我們並不想知道版本號,給我個能用的最新的版本號就ok了。

佈局和樣式

就和很多人想的一樣,為什麼不使用 jsx 或者 xml 格式進行佈局,因為基於程式碼的方式看起來太不直觀了,之所以這樣聽說主要是能更方便的和Dart的hot reload特性配合使用,程式碼改動能立刻反映佈局變化。但我還是期待有適配轉化 DSL 的框架出現。

Flutter一切都是widget,但是連很多屬性都當成widget 這就讓人有些看不明白了,比如 CenterAlignPadding,為什麼不把常用的樣式屬性都加入到佈局元件裡面呢?這導致出現了這麼一種情況:巢狀嚴重,一個很簡單的功能需要層層巢狀才能實現,而且樣式也不能方便的複用。目前比較合理的建議就是適當抽取出子元件減少巢狀。

Json

Dart 作為強型別的語言,一切皆是物件。Dart要方便操作json就得把json轉化為物件,這就意味著每用到一個json,就需要定義一個對應的類,這也是強型別語言的通病了。這絕對讓人很懷念 js/ts 這種對json操作非常自然順暢的弱型別/函式式語言。當然也不是沒有妥協的解決方案,比較方便的就是 json_modelFlutter實戰作者寫的一個工具庫,步驟也簡單:

  1. 在工程根目錄下建立一個名為 "jsons" 的目錄;
  2. 建立或拷貝Json檔案到"jsons" 目錄中 ;
  3. 執行 pub run json_model (Dart VM工程)or flutter packages pub run json_model(Flutter中) 命令生成Dart model類,生成的檔案預設在"lib/models"目錄下

狀態管理

Flutter 使用initStatesetState方法設定widget狀態,原理類似React。當然這只是widget內部控制狀態用的,跨元件通訊還是需要其他方案的。官方推薦是使用Provider,使用下來中規中矩吧,當然還可以使用大名鼎鼎的 Redux 以及 mbox。不過Redux本身就以過多的樣板程式碼而出名,寫React的時候就不喜歡用,hooks 出來後就果斷就放棄Redux了。hooks才是真香啊,Flutter什麼時候才支援類似的函式式狀態管理方案呢?

總結

說了這麼多,本質就是為什麼 Flutter 不向以 React 為代表的 web 生態看齊?更大的原因是Flutter的很多理念和開發模式其實遠遠落後於 React 。這也是為什麼習慣 react/vue 的 web前端 對於Flutter 感覺很彆扭不順手的原因了。

相關文章