flutter不完全指南系列--(一)flutter特點及學習建議

shotCat發表於2019-10-21

why flutter

1,強大的跨平臺

現在flutter至少可以跨5種平臺( MacOS, Windows、 Linux、 Android、 iOS), 甚至可以在,甚至支援嵌入式開發(niubility!)。甚至可以在谷歌最新的作業系統 Fuchsia上執行 。 到目前為止, Flutter算是支援平臺最多的框架了!

2,優秀的元件支援

flutter內建驚豔的 Material Design (that's my shit!) 和 Cupertino 風格(蘋果風格,暫不是很全)元件、豐富的 motionAPI給你最靚的使用者體驗。

3,晌應式框架

使用 Flutter的響應式框架和一系列基礎元件,可以輕鬆構建你的各種介面。

4,支援外掛

通過 Flutter 的外掛可以訪問平臺本地 API,如相機、藍芽、 WiFi 等 。 藉助現有的 Java、 Swift、 Objectiv C、 C++程式碼實現對原生系統的呼叫 。

5,超高效能

Flutter採用 GPU渲染技術,所以效能極高。 Flutter編寫的應用是可以達到 60fps,這也就是說,它完全可以勝任遊戲的製作 。 官方宣稱用 Flutter開發的應用甚至會超過原生應用的效能。

PS:小聲說,flutter在ios的流暢度和android比還是相差有點大的,具體原因嘛,emmmmm....

flutter特點

這裡提到的都是flutter的主要特點,是我們編寫flutter的基本意識! 如果有不理解的,先記住結論,後面的文章會有詳解的。

!important 一切皆為元件(widget)

在flutter中一切皆為元件,這句話非常重要,我們在開始寫flutter之前,一定要有這樣的意識。這樣我們就能更好地上手學習。 在flutter裡,幾乎任何東西都是元件,不僅是常見的ui元件,甚至是佈局方式,樣式,動畫等都是widget(元件)

Widget 可以定義為 :

  • 介面元件(如按鈕或輸入框) 。
  • 文字樣式(如字型或顏色) 。
  • 佈局(如填充或滾動) 。
  • 動畫處理(如緩動) 。
  • 手勢處理( GestureDetector)。

每個Widget都具有豐富的屬性及方法 ,屬性通常用來改變元件的狀態(顏色、大小等)及事件回撥方法的處理(單擊事件回撥、手勢事件回撥等)。 方法主要是提供一些元件的功能擴充套件。

元件巢狀

元件巢狀可以說是flutter的一個特色,也可以說是一個噁心之處,上面說過flutter裡一切皆為元件,所以在複雜的介面裡不可避免的會出現各種深層元件巢狀。有時候比回撥地獄還噁心。

flutter不完全指南系列--(一)flutter特點及學習建議

PS:左邊的缺角就像被街霸的肯,發了個“好喲跟”

元件狀態

和react一樣,flutter也是元件化的思想,其中狀態(state)就是一個元件的UI資料模型,是元件渲染時的資料依據。Flutter程式的執行可以認為是一個巨大的狀態機, 使用者的操作、請求 API 和系統事件的觸發都是推動狀態機執行的觸發點,觸發點通過呼叫 setState 方法推動狀態機進行響應 。

無狀態元件與有狀態元件

元件又分為兩大類:

  • 無狀態元件(繼承自StatelessWidget):初始化後無法修改其狀態和UI,如 Text、Assetlmage等
  • 有狀態元件(繼承自StatefulWidget):其狀態可能在Widget生命週期中發生變化。如 Scrollable、Animatable等。注意:在呼叫setState後,元件類會重新繪製,建立其新的widget

PS:StatefulWidget | StatelessWidget 共性:都繼承自Widget

所以我們在編寫元件時,同樣也要有狀態意識,首先判斷它是有狀態的還是無狀態的。

如果 Widget 需要根據使用者互動或其他因素進行更改,則該 Widget 是有狀態的 。 當你建立一個有狀態元件,則它須繼承自StatefulWidget。並且建立的元件的狀態也會儲存在state的子類中。後面當你需要改變元件的狀態時,必須呼叫setState方法來通知flutter來更新建立新的widget。

學習建議

學習一種新框架,新語言。我覺得有三點是非常重要的。

  • 1,完善詳細的文件和資料
    • 學習flutter可以說是我見過的,官方對中文支援最友好的,沒有之一。雖然flutter是由谷歌開發的,但中國卻是使用最多的國家。自然官方也是相當重視的,它擁有幾乎和英文同步的中文文件,幾乎所有官方視訊都有中文字幕,以及中文的codelabs。所以學習flutter真的是一件門檻很低的一件事。
  • 2,擁有可以方便快速,執行程式碼的環境
    • 這個是必須條件,補充一下,官方特意為中國提供了線上的dart執行環境
  • 3,擁有可以學習模仿的專案程式碼
    • 這個是很重要的,當你學習一種新的語言和框架,難免會遇到各種各樣的坑。這時如果有一份優秀的專案程式碼可以給你參考和模仿。會幫助你少走很多彎路,也會幫助你養成良好的編碼規範。
  • 補充:4,第四點就是用新框架寫一個新專案。一般情況下這個專案會是公司專案,但如果你能寫一個自己的專案,根據自己的意願去設計去研究並最後實現,往往會取得更好的效果。你的收穫也將是最多的!

務必儲存的網址

前面說過flutter對中國市場的重視,所以它們是有詳細完善到髮指的中國官網,速度快,且不需要翻牆。PS:不要用百度查flutter,你搜到的第一個根本不是flutter官網!!! 它是早期的一個熱心網友翻譯官網文件的網站。現在已經完全不能和官中網站比,大家不要進錯了,有梯子的還是儘量用谷歌,不要用百度了。

  • 官方中文網站: flutter.cn/ 這裡擁有最新最詳細的中文文件。詳細的分類,甚至為web,ios,android,RN開發者分別提供了不同的開發指南。
  • Flutter codelabs: codelabs.flutter-io.cn 當你想要檢驗你的flutter,它會為你提供詳盡的程式碼任務,每個任務都會有詳盡的步驟,幾乎手把手教你進行程式設計。在學習初期,進行知識的鞏固非常有效果。
  • awesome-flutter: github.com/Solido/awes… 看見awesome,大家都懂,這裡包含了許多和flutter相關,且質量優秀的專案。
  • Dart官方中文網站: dart.cn/ flutter使用的不是JS而是自家的dart,一種借鑑了java,c++,JavaScript的語言。所以它也是必須要掌握的。
  • Dart線上環境: dartpad.cn/ 學習一種語言,必須要有對應的環境。dart不像JS是可以直接在瀏覽器的console裡執行。而這個官方線上環境則很好地進行了彌補。多說一句:遇到任何不懂的問題,就敲出來,跑起來進行驗證!

PS:flutter和dart的官方中文文件。每段中文,點選後都會顯示對應的原版英文文件,很貼心。這對那些想學習英語,尤其那些程式設計術語的,提高閱讀英文文件,真的很有幫助!

flutter映象配置

關於不同平臺安裝flutter官方 已經很詳細了,這裡我就不bb了,湊字數了。這裡只提下flutter映象設定。

如果你看不懂網上和官方那些教你配置映象的教程。這裡告訴一個更直接的辦法:

  • 直接在你安裝flutter的地方,查詢叫.bash_profile的隱藏檔案。
  • 用文字編輯器開啟,直接貼上上這兩行,最後儲存就行了。
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
複製程式碼

這樣你就儲存了社群主映象,它採用多種方式同步 Flutter 開發者資源,也是官方推薦的。

學習的flutter專案

當你在學習一個新框架時,模仿學習別人優秀的程式碼,往往是最好的老師。這裡我簡單列舉三個專案以供參考:

  • flutter gallery:這個是官方的示例app,裡面有flutter的各種使用場景,是我們學習模仿的模板。傳送門
  • HistoryOfEverything:這也是官方在一個分享會裡推薦的一個app。它有著令人驚訝的動畫表現力和流暢度(小聲說:至少android是這樣的)。對,它呈現的就是那些,你們之前說的那些追著ui打的動效。傳送門
  • Flutter-Story-App-UI:這個專案是我在油管上看到的,顯示效果也是真的不錯。作者:devefy 其他的flutter專案也具有很好的參考價值 傳送門

推薦的這幾個專案,都是之前我們常說的不能讓ui看見或者追著ui打的設計。但是在flutter的加持下,它們變得不再那麼難以實現。

最後再推薦一個flutter工具:fluttergo

這個軟體可以直接在應用市場下,它是由阿里一些工程師利用摸魚時間做的一個app。

  • 裡面包含了全網最新的flutter文章和新聞。
  • 裡面包含了大部分flutter元件的效果展示和對應的屬性方法說明

後續

這是一系列的文章,緊跟著後面還有一篇針對web前端開發者的dart詳解,鑑於掘金的權重,我會留到明天再發布(PS:掘金不宜一天發多篇文章,後發的會沉底)。

重點:

看過我之前長文的,知道我的風格。它不是網上那種千篇一律跟風的copy。它是站在前端角度對dart進行細緻講解,你在flutter開發中遇到的絕大部分問題都可以找到答案。並且其他文章裡對很多java基礎知識點都沒有提及,我都做了詳細說明,對官方文件中,不太好理解的部分,也進行了詳細的說明和示例。

我的筆記github地址:

我之前的筆記都是存在本地的,現在決定全部同步到github上,想看最新的可以關注,我會盡量做到每天一更。傳送門

相關文章