一、前言
閑來無事,花了兩個多星期入了Flutter
的坑,這篇文章總結了一下這段時間學到的東西以及學習過程中看過的資料,也是想借此機會,看看自己有哪些遺漏的地方,感謝網上的各位大神。
之后也會根據總結好的知識體系,寫一些自己的文章。
二、準備工作
2.1 Dart 語言
學習下來,Dart
語言很多地方和Java
都很類似,對于Android
程序員來說沒有什么難度。我學習的時候主要關注的幾點:
- 變量定義
- 函數定義(可選參數是最常用的點)。
- 類(構造函數定義的一些變種)
- 一些
Java
中沒有遇到的操作符,例如?.
,expr1 ?? expr2
,b ??=1
。 -
List
,Map
等數據結構的定義方式。 - 單例的實現方式。
-
mixin
的概念。 -
Dart
語言中的語法糖
推薦文章
2.2 找一篇完整的教程
找到一篇完整的教程,從頭到尾的跟著學習一遍,不要看獨立的博客,有助于對整個Flutter
涉及的方面有一個整體的認識。
在學習完之后,再去針對有疑問的點去針對性地學習。我是跟著下面這篇教程學下來的,受益匪淺,感謝!
推薦文章
三、知識點拆解
經過了上面兩步準備工作,就開始對知識點進行拆解,找一個筆記軟件,按照拆解的分類,無論是別人寫的,還是自己總結的,都要形成“知識組塊”填入到腦海中,才不容易遺忘。
3.1 Widget
Widget
的學習為兩個方面:
- 第一步:控件使用方式的學習,大家可以找一些在項目中做過的比較復雜的界面,試著用
Flutter
的方式寫一遍,flutter-go 展示了經常會用到的控件,用到控件的時候去看它是怎么實現的。 - 第二步:除了會用之外,還要去了解一些
Widget
相關的概念,這里面比較核心的有:-
StatelessWidget
vsStatefullWidget
-
StatefullWidget
中State
的生命周期 BoxConstraints
BuildContext
-
Widget
、Element
、RenderObject
三者的關系
-
推薦文章
- flutter-go
-
Introducing Widget of the Week!,這個是
Flutter
官方的,簡短地介紹了一些很有用的控件及其應用場景。
3.2 資源處理 & 屏幕適配
- 如何聲明并使用
Flutter APK
中的文件、圖片、字體,以及圖片放在不同文件夾下加載后所占的寬高。 - 屏幕適配。
參考資料
- Flutter 實戰 中對應章節。
3.3 動畫
動畫的話簡單的看 Flutter 實戰 中這部分的代碼就行了,主要了解動畫組成,掌握:
- 單個、組合動畫。
- 頁面跳轉動畫。
- 共享元素動畫。
推薦文章
3.4 自定義組件
自定義組件有以下三種方式:
- 組合現有的
Widget
:這種方式比較簡單,組合即可,用于封裝項目中一些通用的布局。 - 自定義
Widget
:通過CustomPaint
和CustomPainter
,類似于在Android
當中重寫View.draw(Canvas canvas)
,使用Canvas
和Paint
的API
在畫布上繪制,當項目中一些圖形比較復雜的時候會用到它。 - 自定義布局:自定義
RenderBox
和MultiChildRenderObjectWidget
的子類,用于子Widget
的排列規則比較復雜的情況,例如Flow/Wrap
這樣的流式布局。
推薦文章
- Flutter自定義繪制(1)- 繪制基礎
- Flutter 34: 圖解自定義 View 之 Canvas (一)
- Flutter 35: 圖解自定義 View 之 Canvas (二)
- Flutter 36: 圖解自定義 View 之 Canvas (三)
- CustomPaint 與 Canvas
- 實例:圓形漸變進度條(自繪)
- Flutter 完整開發實戰詳解(十六、詳解自定義布局實戰)
3.5 手勢處理
-
Listener
:難點在于HitTestBehavior
的場景。 -
IgnorePointer
和AbsorbPointer
:忽略PointEvent
。 -
GestureDector
的回調方法。 -
GestureRecognizer
的使用 - 手勢的競爭和沖突
- 手勢事件流的源碼分析
推薦文章
3.6 異步操作
在Android
里面,異步操作的工具五花八門,AsyncTask
、HandlerThread
,但是在Flutter
里面,一個async/await
就解決問題了,主要掌握下面幾點:
-
Flutter
的事件模型,isolate
的概念。 -
Future
的概念。 -
async/await
的使用方式,以及他們在事件循環中運行的時間點。 -
isolate
之間如何通信。 -
RxDart
的用法,這個和RxJava
很類似,如果之前學過的應該很容易能夠掌握。
推薦文章
3.7 路由
掌握頁面間跳轉和傳遞參數的方式。
推薦文章
3.8 數據操作
數據操作分為以下幾類,都有開源的包可以使用,查看說明文檔即可。
-
SharePreference
,shared_preferences - 文件,path_provider
- 數據庫,sqflite
- 網絡請求,dio
- 在網絡請求的時候,還會遇到將
JSON
轉換成實體類的問題, json_serializable。
3.9 Flutter 與 Native 的通信
-
Flutter
和Native
之間如何進行數據和方法的傳遞。 - 如何在
Flutter
中嵌入Android View
。
參考文章
- Flutter Platform channel 詳解
- Flutter 實例 - 從本地到 Flutter 通信 - Event Channels
- 深入理解 Flutter Platform Channel
3.10 狀態管理
mclzone 寫的一系列關于狀態管理的文章很棒!看完之后就明白了,沒有再看過其它的文章。
推薦文章
- Flutter | 狀態管理探索篇 —— Scoped Model (一)
- Flutter | 狀態管理探索篇 —— Redux (二)
- Flutter | 狀態管理探索篇 —— BLoC (三)
- Flutter | 狀態管理拓展篇 —— RxDart (四)
- Flutter | 狀態管理指南篇 —— Provider
3.11 國際化
國際化的掌握分為三步:
- 跟著 實用的 Flutter 國際化指南 中的標準方式做一遍。
- 用 flutter_i18n 實現一遍,會發現其實現原理同上,只是將轉換部分的邏輯自動生成了。
- 看一下 flutter_gank ,了解如何在項目中實現。
推薦文章
3.12 進階
(1) 編譯 & 打包原理
(2) 初始化流程
(3) 繪制框架分析
ad6623 - 掘金 寫的下面這系列關于渲染流水線的文章很棒,我每篇都邊看邊畫流程圖跟著學了下來,雖然很痛苦,但是收貨很大,感謝!
(4) 繪制框架的一些補充文章
- Flutter 實現原理及在馬蜂窩的跨平臺開發實踐
- Joey的Flutter之旅 - (3) 布局構建、渲染、繪制機制淺析
- Flutter 視圖的 Layout 與 Paint
- Flutter's Rendering Pipeline
(5) Dart
3.13 看一下實際的 App 是如何實現的
3.14 性能優化
剛入門,還沒到性能優化的地步,還需繼續努力。= =
3.15 打包 & 發布
四、小結
當然,這只是一篇入門的教程,離工程化的標準還很遠,這種只能到項目中實踐了。