從頭到尾擼一遍Flutter的一切...

YangYi發表於2020-04-20

Flutter

Flutter學(cai)習(keng)之路(Exploring Flutter in action)

創世宣言

盡情踩坑吧 ⤵️

主要Cover到的點

路由介面
狀態傳遞
- 子Widget樹獲取父級StatefulWidget的State物件
基礎控制元件
- 隨機字串
- 文字控制元件，字型樣式(Text/TextStyle/Text.rich/TextSpan)
- 按鈕系列(RaisedButton/FlatButton/OutlineButton/IconButton/FlatButton.icon/shape)
- 圖片系列(ImageProvider/Image/Image.asset/Image.network)
- 單選開關和核取方塊Switch/Checkbox
- 輸入框和表單(TextField/Form/TextFormField/FormState)
- 登入表單(TextField/Form/TextFormField/FormState)
- 各種樣式的進度條(LinearProgressIndicator/CircularProgressIndicator)
佈局控制元件
- 線性佈局(Row/Column)
- 彈性佈局(Flex/Expanded/Spacer)
- 流式佈局(Wrap/Flow)
- 層疊佈局(Stack/Positioned)
- 對齊與相對定位(Align/Alignment/FractionalOffset/Center)
容器控制元件
- 填充(Padding/EdgeInsets)
- 尺寸限制(ConstrainedBox/BoxConstraints/SizedBox/UnconstrainedBox)
- 裝飾(DecoratedBox)
- 變換(Transform/Matrix4(作用於繪製階段)/RotatedBox(作用於佈局階段))
- 容器(Container(多種裝飾和填充等元件的組合)/Padding/Margin)
- 裁減(Clip/CustomClipper(裁減動作的作用時期與Transform相同，都作用於繪製階段))
- 通用類導航主介面(Scaffold/AppBar/TabBar/TabBarView/Drawer/FloatingActionButton)
列表控制元件
- 單child滾動控制元件(SingleChildScrollView/Scrollbar)
- 有限列表項情況下使用ListView(ListView)
- 眾多列表項情況下使用ListView(ListView.builder)
- 帶分割線的列表項情況下使用ListView(ListView.separated)
- 下拉重新整理 和 上拉載入更多(初始化載入資料、結束時的標記、根據index判斷底部是繪製結束的Widget還是正在載入時的Widget、Widget的正常顯示)
- 有限GridView(GridView + SliverGridDelegateWithFixedCrossAxisCount)
- 有限GridView.count(效果完全等價於GridView + SliverGridDelegateWithFixedCrossAxisCount)
- 有限GridView(GridView + SliverGridDelegateWithMaxCrossAxisExtent)
- 有限GridView.extent(效果完全等價於GridView + SliverGridDelegateWithMaxCrossAxisExtent)
- 無限GridView載入(GridView.builder)
- 滾動監聽(ScrollController/ScrollPosition)
觸控反饋
- 事件處理
  - 原始指標(觸控事件)(擼一個觸控板)(Listener)
- 事件冒泡
  - 不同事件冒泡行為之比較(HitTestBehavior.deferToChild/HitTestBehavior.opaque/HitTestBehavior.translucent/IgnorePointer)
- 手勢識別
  - 點選/雙擊/長按/拖動/滑動(GestureDetector)
  - 縮放(GestureDetector)
  - GestureRecognizer(當所修飾的物件不為widget且具有recognizer節點時可用)
事件匯流排
- 簡易EventBus(Dart實現)
- EventBus介面演示
通知
- 通知事件名稱(NotificationListener.onNotification)
- 自定義通知(覆寫Notification + NotificationListener)
- 通知冒泡(onNotification回撥中的return value)
儲存路徑訪問和檔案操作
- 儲存路徑訪問(訪問快取/訪問包路徑/訪問SD卡)(PathProvider)
網路程式設計
- HttpClient
- Dio(本質是基於HttpClient封裝的上層API)
  - 更多Dio版本資訊及API(官方地址)
功能控制元件及資料狀態管理(InheritedWidget)
- 導航返回鍵和實體返回鍵攔截(再按一次確認退出)(WillPopScope)
- 控制元件跨級傳遞資料(InheritedWidget/dependOnInheritedWidgetOfExactType/getElementForInheritedWidgetOfExactType/updateShouldNotify/didChangeDependencies)
- 跨控制元件狀態管理(手動實現Provider)
  - 第三方Provider實現
- 非同步更新UI(FutureBuilder/StreamBuilder)
應用主題切換(Theme/ThemeData(內部通過InheritedWidget實現))
- 單個介面主題切換
- 全域性介面主題切換
與原生互調和相互整合(MethodChannel.invokeMethod)
- Flutter呼叫Android Native方法
- Flutter介面跳轉至Android Native介面
WebView Flutter(webview_flutter)
開發者通用設定(MaterialApp)
- 是否顯示介面佈局網格(debugShowMaterialGrid)
- 是否開啟效能監控，覆蓋在螢幕最上面(showPerformanceOverlay)
- 是否開啟柵格快取影像的檢查板(checkerboardRasterCacheImages)
- 是否開啟顯示到螢幕外點陣圖的圖層的檢查皮膚(checkerboardOffscreenLayers)
- 是否開啟覆蓋圖，顯示框架報告的可訪問性資訊，顯示邊框(showSemanticsDebugger)
- 是否顯示右上角的Debug標籤(debugShowCheckedModeBanner)
切換作業系統平臺(Android/iOS)
- 切換為Android應用: debugDefaultTargetPlatformOverride = TargetPlatform.android
- 切換為iOS應用: debugDefaultTargetPlatformOverride = TargetPlatform.iOS
動畫
自定義控制元件
國際化