flutter中提供了Future.wait()函數(shù)，可以在執(zhí)行多個異步請求之后有一個統(tǒng)一的回調(diào)結(jié)果，但是劣勢在于，每一個異步函數(shù)的函數(shù)體中都需要執(zhí)行return去返回結(jié)果，如果在異步請求中，有多層success或者fail這種函數(shù)的嵌套，那么可能會在某個地方忽略掉retrun，導致沒有辦法拿到正確的結(jié)果。所以這里封裝了一個類似于js中Promise中的類去執(zhí)行多個異步請求。
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：成都網(wǎng)站設計、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的陜西網(wǎng)站設計、移動媒體設計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴！
調(diào)用方式如下：
本文首發(fā)在公眾號 Flutter那些事 ，歡迎大家多多關(guān)注。
工具安裝：
Flutter基礎篇：
Flutter進階篇：
Dart語法基礎篇：
Dart語法進階篇：
說明：本文中的所有函數(shù)的引用在 main 函數(shù)中：
這里的執(zhí)行結(jié)果是：
Futue直接new就可以了。我這里沒有具體的返回數(shù)據(jù)，所以就用匿名函數(shù)代替了， Future future = new Future(() = null); 相當于 FutureNull future = new Future(() = null); 泛型如果為null可以省略不寫，為了便于維護和管理，開發(fā)中建議加上泛型。
輸出結(jié)果是：
future里面有幾個函數(shù)：
then ：異步操作邏輯在這里寫。
whenComplete ：異步完成時的回調(diào)。
catchError ：捕獲異?；蛘弋惒匠鲥e時的回調(diào)。
因為這里面的異步操作過程中沒有遇到什么錯誤，所以catchError回調(diào)不會調(diào)用。
我們可以看到執(zhí)行結(jié)果是：
我們可以看到輸出結(jié)果是： 2 1 3 和我們創(chuàng)建Future對象的先后順序完全一致。
我們可以看到結(jié)果為 1 2 3 ，和我們調(diào)用then的先后順序無關(guān)。：
當then回調(diào)函數(shù)里面還有then回調(diào)的時候，這時候的流程跟前面就不太一樣了，也是一個大坑，也是面試經(jīng)常會被問到的一個知識點。
我們可以看到執(zhí)行結(jié)果如下：
結(jié)果還是一樣的：
運行結(jié)果是：
這里再次證明了上面我的猜想： 執(zhí)行順序和和創(chuàng)建Future的先后順序有關(guān)，如果有多個then嵌套執(zhí)行，先執(zhí)行外面的then，然后執(zhí)行里面的then。
執(zhí)行結(jié)果如下，我們可以看到then內(nèi)部創(chuàng)建的Future要等到then執(zhí)行完了，最后再去執(zhí)行的：
根據(jù)上文總結(jié)的特點，我們可以不用運行也能推斷出輸出結(jié)果：
為了驗證我們的猜想，我們打印一下輸出結(jié)果，果然我們的證明是正確的。
我們重點看看 then函數(shù)的文檔說明：
then 注冊在 Future 完成時調(diào)用的回調(diào)。
當這個 Future 用一個 value 完成時，將使用該值調(diào)用 onValue 回調(diào)。
如果 Future 已經(jīng)完成，則不會立即調(diào)用回調(diào)，而是將在稍后的 microtask（微任務） 中調(diào)度。
如果回調(diào)返回 Future ，那么 then 返回的 future 將與 callback 返回的 future 結(jié)果相同。
onError 回調(diào)必須接受一個參數(shù)或兩個參數(shù)，后者是[StackTrace]。
如果 onError 接受兩個參數(shù)，則使用錯誤和堆棧跟蹤時調(diào)用它，否則僅使用錯誤對象時候調(diào)用它。
onError 回調(diào)必須返回一個可用于完成返回的future的值或future，因此它必須是可賦值給 FutureOr R 的東西。
返回一個新的 Future ，該 Future 是通過調(diào)用 onValue (如果這個Future是通過一個value完成的)或' onError (如果這個Future是通過一個error完成的)的結(jié)果完成的。
如果調(diào)用的回調(diào)拋出異常，返回的 future 將使用拋出的錯誤和錯誤的堆棧跟蹤完成。在 onError 的情況下，如果拋出的異常與 onError 的錯誤參數(shù)“相同(identical)”，則視為重新拋出，并使用原始堆棧跟蹤替代
如果回調(diào)返回 Future ，則 then 返回的 Future 將以與回調(diào)返回的 Future 相同的結(jié)果完成。
如果未給出 onError ，并且后續(xù)程序走了剛出現(xiàn)了錯誤，則錯誤將直接轉(zhuǎn)發(fā)給返回的 Future 。
在大多數(shù)情況下，單獨使用 catchError 更可讀，可能使用 test 參數(shù)，而不是在單個 then 調(diào)用中同時處理 value 和 error 。
請注意，在添加監(jiān)聽器(listener)之前， future 不會延遲報告錯誤。如果第一個 then 或 catchError 調(diào)用在 future 完成后發(fā)生 error ，那么 error 將報告為未處理的錯誤。
在網(wǎng)上找了很多沒有關(guān)于這方面的例子，組件之間傳值，可以通過構(gòu)建函數(shù)，如果我要回調(diào)這個組件的值呢，給大家介紹一下這兩個值?ValueChanged?VoidCallback 自己也加深記憶一下
一ValueChanged
官方解釋
這個值可以回調(diào)值，例如
二?VoidCallback?
這個值也可以回調(diào)但不能回調(diào)值，只能觸發(fā)方法
hao((){
print("");
});
hao(VoidCallback voidCallback){
voidCallback();
}
錯誤方法下面會報錯的
對動畫系統(tǒng)而言，為了實現(xiàn)動畫，它需要做三件事兒：1.確定畫面變化的規(guī)律；2.根據(jù)這個規(guī)律，設定動畫周期，啟動動畫；3.定期獲取當前動畫的值，不斷地微調(diào)、重繪畫面。
這三件事情對應到 Flutter 中，就是 Animation、AnimationController 與 Listener：
1.Animation 是 Flutter 動畫庫中的核心類，會根據(jù)預定規(guī)則，在單位時間內(nèi)持續(xù)輸出動畫的當前狀態(tài)。Animation 知道當前動畫的狀態(tài)（比如，動畫是否開始、停止、前進或者后退，以及動畫的當前值），但卻不知道這些狀態(tài)究竟應用在哪個組件對象上。換句話說，Animation 僅僅是用來提供動畫數(shù)據(jù)，而不負責動畫的渲染。
2.AnimationController 用于管理 Animation，可以用來設置動畫的時長、啟動動畫、暫停動畫、反轉(zhuǎn)動畫等。
3.Listener 是 Animation 的回調(diào)函數(shù)，用來監(jiān)聽動畫的進度變化，我們需要在這個回調(diào)函數(shù)中，根據(jù)動畫的當前值重新渲染組件，實現(xiàn)動畫的渲染。
class NormalAnimateWidget extends StatefulWidget {
@override
StatecreateState()=_NormalAnimateState();
}
class _NormalAnimateState extends Statewith SingleTickerProviderStateMixin{
AnimationController?controller;
Animation?animation;
@override
void initState() {
// TODO: implement initState
super.initState();
/*
* AnimationController
AnimationController用于控制動畫，它包含動畫的啟動forward()、停止stop() 、反向播放 reverse()等方法。
* AnimationController會在動畫的每一幀，就會生成一個新的值。
* 默認情況下，AnimationController在給定的時間段內(nèi)線性的生成從 0.0 到1.0（默認區(qū)間）的數(shù)字。
* */
/*Ticker
當創(chuàng)建一個AnimationController時，需要傳遞一個vsync參數(shù)，
它接收一個TickerProvider類型的對象，它的主要職責是創(chuàng)建Ticker，定義如下：
abstract class TickerProvider {
//通過一個回調(diào)創(chuàng)建一個Ticker
Ticker createTicker(TickerCallback onTick);
}
Flutter 應用在啟動時都會綁定一個SchedulerBinding，
通過SchedulerBinding可以給每一次屏幕刷新添加回調(diào)，
而Ticker就是通過SchedulerBinding來添加屏幕刷新回調(diào)，這樣一來，
每次屏幕刷新都會調(diào)用TickerCallback。
使用Ticker(而不是Timer)來驅(qū)動動畫會防止屏幕外動畫（動畫的UI不在當前屏幕時，如鎖屏時）
消耗不必要的資源，因為Flutter中屏幕刷新時會通知到綁定的SchedulerBinding，
而Ticker是受SchedulerBinding驅(qū)動的，
由于鎖屏后屏幕會停止刷新，所以Ticker就不會再觸發(fā)。
*/
// 創(chuàng)建動畫周期為1秒的AnimationController對象
controller =AnimationController(
vsync:this, duration:const Duration(milliseconds:3000));
/*
* Curve
* 動畫過程可以是勻速的、勻加速的或者先加速后減速等。
* Flutter中通過Curve（曲線）來描述動畫過程，
* 我們把勻速動畫稱為線性的(Curves.linear)，而非勻速動畫稱為非線性的。
* 我們可以通過CurvedAnimation來指定動畫的曲線，如：
final CurvedAnimation curve =
CurvedAnimation(parent: controller, curve: Curves.easeIn);
*
Curves曲線 動畫過程
linear 勻速的
decelerate 勻減速
ease 開始加速，后面減速
easeIn 開始慢，后面快
easeOut? 開始快，后面慢
easeInOut? 開始慢，然后加速，最后再減速
*
* 當然我們也可以創(chuàng)建自己Curve，例如我們定義一個正弦曲線：
class ShakeCurve extends Curve {
@override
double transform(double t) {
return math.sin(t * math.PI * 2);
}
}
* */
final CurvedAnimation curve =CurvedAnimation(
parent:controller!, curve:Curves.linear);
/*
* Animation
*Animation是一個抽象類，它本身和UI渲染沒有任何關(guān)系，
* 而它主要的功能是保存動畫的插值和狀態(tài)；其中一個比較常用的Animation類是Animation。
* Animation對象是一個在一段時間內(nèi)依次生成一個區(qū)間(Tween)之間值的類。
* Animation對象在整個動畫執(zhí)行過程中輸出的值可以是線性的、曲線的、一個步進函數(shù)或者任何其他曲線函數(shù)等等，
* 這由Curve來決定。 根據(jù)Animation對象的控制方式，
* 動畫可以正向運行（從起始狀態(tài)開始，到終止狀態(tài)結(jié)束），
* 也可以反向運行，甚至可以在中間切換方向。
* Animation還可以生成除double之外的其他類型值
* ，如：Animation 或Animation。
* 在動畫的每一幀中，我們可以通過Animation對象的value屬性獲取動畫的當前狀態(tài)值。
#動畫通知
我們可以通過Animation來監(jiān)聽動畫每一幀以及執(zhí)行狀態(tài)的變化，Animation有如下兩個方法：
addListener()；它可以用于給Animation添加幀監(jiān)聽器，
* 在每一幀都會被調(diào)用。
* 幀監(jiān)聽器中最常見的行為是改變狀態(tài)后調(diào)用setState()來觸發(fā)UI重建。
addStatusListener()；
* 它可以給Animation添加“動畫狀態(tài)改變”監(jiān)聽器；
* 動畫開始、結(jié)束、正向或反向（見AnimationStatus定義）時會調(diào)用狀態(tài)改變的監(jiān)聽器。
* */
// 創(chuàng)建從50到200線性變化的Animation對象
// 普通動畫需要手動監(jiān)聽動畫狀態(tài)，刷新UI
animation =Tween(begin:10.0, end:200.0).animate(curve)
..addListener(()=setState((){}));
/*
* Tween
* 默認情況下，AnimationController對象值的范圍是[0.0，1.0]。
* 如果我們需要構(gòu)建UI的動畫值在不同的范圍或不同的數(shù)據(jù)類型，
* 則可以使用Tween來添加映射以生成不同的范圍或數(shù)據(jù)類型的值。
*Tween構(gòu)造函數(shù)需要begin和end兩個參數(shù)。
* Tween的唯一職責就是定義從輸入范圍到輸出范圍的映射。
* 輸入范圍通常為[0.0，1.0]，但這不是必須的，我們可以自定義需要的范圍。
* */
// 啟動動畫
controller!.repeat(reverse:true);
//
// 第二段
// animation!.addStatusListener((status) {
//? if (status == AnimationStatus.completed) {
//? ? controller!.reverse();// 動畫結(jié)束時反向執(zhí)行
//? } else if (status == AnimationStatus.dismissed) {
//? ? controller!.forward();// 動畫反向執(zhí)行完畢時，重新執(zhí)行
//? }
// });
// controller!.forward();// 啟動動畫
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home:Scaffold(
body:Center(
child:Container(
width:animation!.value,// 將動畫的值賦給 widget 的寬高
? ? ? ? ? ? ? height:animation!.value,//
? ? ? ? ? ? ? child:FlutterLogo(),
)
)
)
);
}
@override
void dispose() {
// 釋放資源
controller!.dispose();
super.dispose();
}
}
需要創(chuàng)建兩個工程，一個是FlutterWeb工程最終打包成Web頁面，一個是Flutter原生工程承載一個WebView用來加載Web頁面。這樣做的好處在于只需要一種語言開發(fā)iOS和Android不用對接兩次，可以直接使用社區(qū)Flutter原生工程的插件，只需要封裝給Web調(diào)用。
FlutterWeb工程pubspec.yaml添加依賴
Flutter原生工程pubspec.yaml添加依賴
創(chuàng)建一個 toast_channel.dart，定義一個類實現(xiàn) JavascriptChannel 重寫name指定channel名稱和onMessageReceived指定調(diào)用函數(shù)
在WebView的 javascriptChannels 配置上定義的Channel
創(chuàng)建一個 native_channel.dart ，定義一個外部函數(shù)通過 @JS("調(diào)用的channel和函數(shù)名") 注解指定調(diào)用的原生函數(shù)（JavascriptChannel固定名稱為postMessage）
需要使用的地方直接調(diào)用
創(chuàng)建一個 js_function.dart，存放被原生調(diào)用的函數(shù)名稱
將要提供給原生調(diào)用的函數(shù)，通過 js.context[原生調(diào)用名稱] = 函數(shù) 開放給外部調(diào)用
如果在FlutterWeb工程要使用這個函數(shù)也可以使用@JS注解
WebView 創(chuàng)建時會回調(diào) onWebViewCreated 獲得 WebViewController ，WebViewController 調(diào)用 runJavascript 會執(zhí)行JS函數(shù)無返回值，調(diào)用 runJavascriptReturningResult 會執(zhí)行JS函數(shù)有返回值。
FutureBuilder獲取WebViewController， 需要使用的地方直接調(diào)用
使用 HTML，CSS，Canvas 和 SVG 元素來渲染。
缺點：會存在不同平臺效果不一樣。
優(yōu)點：不加載canvaskit默認使用系統(tǒng)字體，加載過程沒有多余開銷。
需要用到wasm，WebAssembly 要求需要瀏覽器支持，WebView Android需要最低需要57，Safari iOS 需要最低需要 11。
缺點：canvaskit 有7m大默認地址在國外首次加載耗時；中文會加載字體庫默認地址在國外加載慢。
優(yōu)點：性能更好，渲染效果一致。
--web-renderer=auto 默認移動端瀏覽器選擇 HTML，桌面端瀏覽器選擇 CanvasKit。
--web-renderer=html 使用 HTML 渲染器
--web-renderer=canvaskit 使用 CanvasKit 渲染器
綜上所訴推薦移動端使用HTML渲染更合適，在編譯和打包時指定渲染器 --web-renderer=html 。
--debug 模式構(gòu)建的 Web 應用沒有被壓縮，且 Tree-shaking 沒有執(zhí)行。
--profile 模式構(gòu)建的 Web 應用沒有被壓縮，但 Tree-shaking 執(zhí)行了。
--release 模式構(gòu)建的 Web 應用被壓縮了，并且 Tree-shaking 執(zhí)行了
運行命令
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html
flutter run web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --profile
打包命令
flutter build web --dart-define=FLUTTER_WEB_CANVASKIT_URL=./canvaskit/ --web-renderer=html --release
重慶分公司
重慶分公司
