從今年五月一之后就開始學習Flutter了，接觸到Flutter之后，才發現Flutter的方便，強大；api對開發者來說真是太友好了，斷斷續續學了一個月后，對FLutter有了一定得了解，總結了一些心得體會；這邊總結存放許久，今天發出來記錄一下，以防丟失，方便自己以后查看復習。
#Widget? everything is widget
StateLessWidget 無狀態Widget? build();構建展示頁面 ，
StatefulWidget 有狀態Widget，
lifecycle：
//the lifecycle of [State]
enum _StateLifecycle {
created,->State.initState() 當前頁面被添加時被調用
initialized,->State.didChangeDependencies() 當前頁面的初始化
State.deactivate()準備移除當前頁面
ready,
State.dispose()當前頁面被移除
defunct,
}
其他：didUpdateWidget()有新widget被添加，熱重載時調用, setState（）更新頁面數據 ->build()構建展示頁面 ，
#Scaffold? ? ##demos/LayoutApp.dart
Scaffold ：腳手架，相當于Android的Activity，Fragment，實現基本材料設計視覺布局結構。
bottomNavigationBar:底部導航欄
###在Android上：該應用導航到目標的頂級屏幕。重置任何先前的用戶交互和臨時屏幕狀態，例如滾動位置，選項卡選擇和內聯搜索。
在iOS上（CupertinoTabBar）：目的地反映了用戶之前的互動。如果用戶先前訪問過應用程序的該部分，則會返回到查看的最后一個屏幕（如果可能，保留其先前狀態）。否則，應用程序會導航到頂級屏幕。
floatingActionButton：懸浮按鈕
drawer：左邊抽屜
endDrawer：右邊抽屜
bottomSheet：底部提示抽屜（靜態，不可消失）
appBar:標題欄
##demos/tab/TabBar.dart
TabBar 一個顯示水平選項卡的Material Design widget。
TabBarView 顯示與當前選中的選項卡相對應的頁面視圖。通常和TabBar一起使用。
#Container? ##demos/container/ContainerDemos.dart
相當于Android里的LinearLayout
Row 行 在水平方向上排列子widget的列表
Column 列 在垂直方向上排列子widget的列表。
Stack 可以允許其子widget簡單的堆疊在一起 （Android FrameLayout）
Container 一個擁有繪制、定位、調整大小的 Widget容器，本身也是Widget
Center 將其子widget居中顯示在自身內部的widget
Wrap 包括容器
Card 帶陰影，圓角的容器
Padding 一個widget, 會給其子widget添加指定的填充
#Widgets Button:? ##demos/LayoutApp.dart
RaiseButton: Material :Design中的button， 一個凸起的材質矩形按鈕? (相當于一個有點擊事件的容器，一般包含一個Text child，onPressed 處理點擊事件，)
FlatButton，一個沒有陰影的材質設計按鈕。（一般只有文案，用于Dialog對話框底部按鈕）
IconButton，用于創建僅包含圖標的按鈕。（跟 RaiseButton有點類似，只是child換成了icon圖標）
DropdownButton，一個顯示可供選擇的選項的按鈕。（能彈出一個類似Dialog樣式的彈窗）
InkWell，實現平面按鈕的墨水飛濺部分。（用法較麻煩，效果不是很明顯）
FloatingActionButton，材質應用程序中的圓形按鈕。(懸浮按鈕，優先級別較大，一般用于BottomBar上，或者主頁上，作為比較重要的邏輯入口)
#國際化? ## demos/international/International.dart
#resources 資源 demos/res/Resources.dart
pubspec.yaml文件中聲明 assets: - images/**.jpg ; assets: - images/這種聲明只適合1.0中有的文件
pubspec.yaml 文件 聲明的資源都會被打包到apk中
#自定義字體? demos/res/Resources.dart
#輸入框 demo/input_select_widgets/InputSelectBox.dart
TextField ：文本字段允許用戶輸入文本，可以使用硬件鍵盤，也可以使用屏幕鍵盤。
#選擇框 demo/input_select_widgets/InputSelectBox.dart
CheckBox：復選框，允許用戶從一組中選擇多個選項。（不帶文字，圖標描述）
CheckboxListTile：它將此小部件與ListTile結合使用，以便您可以為復選框指定標簽。（帶文字，圖標描述）
##demo/input_select_widgets/InputSelectBox.dart
Radio：單選框，允許用戶從一組中選擇一個選項。（不帶文字，圖標描述）
RadioListTile：它將此小部件與ListTile結合使用，以便您可以為單選按鈕指定標簽。（帶文字，圖標描述）
##demo/input_select_widgets/InputSelectBox.dart
Switch ：On/off 用于切換一個單一狀態（不帶文字，圖標描述）
SwitchListTile，它將此小部件與ListTile結合使用，以便為交換機提供標簽。（帶文字，圖標描述）
##demo/input_select_widgets/InputSelectBox.dart
Slider：滑塊，允許用戶通過滑動滑塊來從一系列值中選擇。
Date & Time Pickers：日期&時間選擇器
#Dialog? demo/dialog/Dialog.dart
SimpleDialog ：簡單對話框可以顯示附加的提示或操作
AlertDialog ：一個會中斷用戶操作的對話款，需要用戶確認
BottomSheet：是一個從屏幕底部滑起的列表（以顯示更多的內容）。你可以調用showBottomSheet()或showModalBottomSheet彈出
ExpansionPanel：擴展面板包含創建流，允許對元素進行輕量級編輯。expanpanel與ExpansionPanelList結合使用。
SnackBar ： 具有可選操作的輕量級消息提示，在屏幕的底部顯示。
#標簽， ## demo/message_widget/MessageWidget.dart
Chip：一個Material widget。 它可以將一個復雜內容實體展現在一個小塊中，如聯系人。
InputChip：一種芯片，以緊湊的形式表示復雜的信息，例如實體（人，地方或事物）或會話文本。
ChoiceChip：允許從一組選項中進行單一選擇。選擇芯片包含相關的描述性文本或類別
## demo/message_widget/MessageWidget.dart
LinearProgressIndicator：線性進度條，
CircularProgressIndicator：圓形進度條
## demo/message_widget/MessageWidget.dart
Stepper：一個Material Design 步驟指示器，顯示一系列步驟的過程
inputChip:
演示視頻 ：https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F12UiMVkjIJrWLKyDljDbbSgJQSuTs5vZR%2Fentry-chip-behavior-editable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1UpLaNgayWmHV8gIGOybjBMGXfsm2KrU2%2Fentry-chip-behavior-expandable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1yP4gEV5gaomMWK30xoTCO3mSPFwvi7Wv%2Fentry-chip-behavior-draggable.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fa62nXcCK1CgMTZ28nE0KfE-vkH1aHsm%2Fentry-chip-placement-scrolling.mp4
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1fD_fhRHOQl0yc9BtWmzPbtj3gU9qFG4s%2Fentry-chip-behavior-stackable.png
##############################################################################################################################################
Flutter 進階總結
1.bottomNavigationBar:底部導航欄
###在Android上：該應用導航到目標的頂級屏幕。重置任何先前的用戶交互和臨時屏幕狀態，例如滾動位置，選項卡選擇和內聯搜索。
在iOS上（CupertinoTabBar）：目的地反映了用戶之前的互動。如果用戶先前訪問過應用程序的該部分，則會返回到查看的最后一個屏幕（如果可能，保留其先前狀態）。否則，應用程序會導航到頂級屏幕。
#IndexedStack
# 可以用OffStage控件解決 用法見? ? lib/youluedu/NavigationBottomBar.dart
Offstage的布局行為完全取決于其offstage參數
## Offstage的作用很簡單，通過一個參數，來控制child是否顯示，日常使用中也算是比較常用的控件。
當offstage為true，當前控件不會被繪制在屏幕上，不會響應點擊事件，也不會占用空間；
當offstage為false，當前控件則跟平常用的控件一樣渲染繪制；
***另外，當Offstage不可見的時候，如果child有動畫，應該手動停掉，Offstage并不會停掉動畫。
2.開屏頁空白
# 官網在android/app/res/values/styles中提供了LaunchTheme主題支持，在清單文件中，設置在MainActivity上，
##LaunchTheme
Flutter draws its first frame -->
@drawable/launch_background
## launch_background
android:gravity="center"
android:src="@mipmap/lake" />
3.? ? RefreshIndicator
## RefreshIndicator(
notificationPredicate: (scrollNotification){
print('----------------depth = ${scrollNotification.depth}');
return scrollNotification.depth==0;
},
semanticsLabel: 'seman label',
semanticsValue: 'seman value',
color: Colors.lightBlueAccent,
backgroundColor: Colors.redAccent,
child: ListView(...)
);
4.WillPopScope
##注冊一個回調函數，以否決用戶試圖取消所附內容的嘗試
###簡單理解：就是在退出頁面前，需要做的一些邏輯（表單數據未保存提醒，連續按兩次返回鍵程序退出）
####系統控件? 自動實現
WillPopScope({
Key key,
@required this.child,//child是頁面具體內容Widget
@required this.onWillPop,//是一個（）{}無參回調函數，做邏輯處理，返回false不退出，返回true退出
}) : assert(child != null)
#### 手動注冊方式實現(下面這一套代碼復制到頁面就行)? eg:注意是在當前頁面，不是跳轉頁
ModalRoute _route;
Future callBack() async{ return true;? }
@override
void didChangeDependencies() {
super.didChangeDependencies();
_route?.removeScopedWillPopCallback(callBack);
_route = ModalRoute.of(context);
_route.addScopedWillPopCallback(callBack);
}
@override
void dispose() {
_route.removeScopedWillPopCallback(callBack);
_route = null;
super.dispose();
}
5. flutter隱藏狀態欄，
SystemChrome.setEnabledSystemUIOverlays([]);
6.Redux
#Action : 區分要操作的邏輯分類（一般是 enum 類型 ）
#StoreProvider ：包裝你的MaterialApp或WidgetsApp。這將確保所有路由都可以訪問
##StoreConnector ： 將存儲連接到呈現當前計數的文本小部件，為您的小部件構建一個專門的' ViewModel '(而不是遍歷整個[Store])
##StoreBuilder ：通過直接將[Store]傳遞給Build函數來構建小部件。將整個Store對象傳過去，并且不需要初始化后的Store變量
# T xxxReducer(T state, dynamic action) ：當State狀態變化時候的回調函數，它會通知StoreProvider去通過熱重載更新最新數據（不是重新走build函數，重建頁面），
# store.dispatch(Actions)：響應相關動作，更新數據（發送更新數據通知給? reducer 函數）
總結：每次按下按鈕揮著數據更新，就會發出一個動作并通過reducer運行。在reducer更新狀態之后，小部件將自動使用最新的計數重新構建（熱重載）
7.? webview_flutter
## WebView
initialUrl:初始加載url
javascriptMode:控制javaScript開關
onWebViewCreated：webView創建后的回調
javascriptChannels：與WebView交互的函數集合
navigationDelegate：如何處理導航操作(加載URL之前攔截處理)
onPageFinished：頁面加載完后的回調
### WebViewController 控制WebView頁面的控制器
loadUrl() : 加載Url頁面
reload() :刷新
goBack():返回
goForward():前進
clearCache():清除緩存
......
8. FutureBuilder 基于與[Future]交互的最新snapshot(數據)構建自身的小部件。繼承StatefulWidget
用途：在做一個耗時異步請求時，可以根據不同的狀態構建不同的Widget,eg:網絡請求，請求時展示等待Progress,結束時返回想要構建的界面
future:異步操作對象Future類型，
builder：(context, AsyncSnapshot snapshot) {
snapshot：
snapshot.connectionState：枚舉類
enum ConnectionState {
//future還未執行的快照狀態
none,
//連接到一個異步操作，并且等待交互，一般在這種狀態的時候，我們可以加載個菊花
waiting,
//連接到一個活躍的操作，比如stream流，會不斷地返回值，并還沒有結束，一般也是可以加載個菊花
active,
//異步操作執行結束，一般在這里可以去拿取異步操作執行的結果，并顯示相應的布局
done,
}
snapshot.data ;拿到請求到的數據model
snapshot.error://錯誤信息
}
9.SliverList
other：
##Share (plugin),發送文件，不是分享，只是發出去一個Action,吊起系統的文件發送界面
##EventBus (plugin),輕量級頁面間通訊，（比自己實現callBack簡單，比Redux效率高）
由于編寫的Demo含有公司的部分信息，不方便發出來，后期會做些修改分享出來；
