flutter web:lottie jssdk报错处理
升級到Flutter 2.0后,在使用過程中發現會報錯類似NoSuchMethod: call(),導致后續的動畫顯示不出來。
(注意:這個問題是將渲染器改成Html Render之后出現的,不知道在CanvasKit上會不會出現)
但是報錯的堆棧信息根本沒用,除了知道源頭是lottie.js中的triggerEvent函數,如下:
triggerEvent: function (eventName, args) {if (this._cbs[eventName]) {var len = this._cbs[eventName].length;for (var i = 0; i < len; i += 1) {this._cbs[eventName][i](args);}}},報錯位置就是this._cbs[eventName][i](args);
我們將這行代碼try-catch上,再執行就正常了。
但是會出現另外一個問題,我們為lottie注冊了一個complete的回調,這時候回調不執行了。
對比一下注冊監聽的代碼:
triggerEvent: function (eventName, args) {if (this._cbs[eventName]) {var len = this._cbs[eventName].length;for (var i = 0; i < len; i += 1) {this._cbs[eventName][i](args);}}},addEventListener: function (eventName, callback) {if (!this._cbs[eventName]) {this._cbs[eventName] = [];}this._cbs[eventName].push(callback);return function () {this.removeEventListener(eventName, callback);}.bind(this);},可以確定之前報錯可能就是因為這個回調,triggerEvent實際上就是處理這些callback的。所以應該是我們設置的回調出了問題。
在js中我們代碼只有一行:
lottieObj.addEventListener('complete', lottieLoaded);所以這里問題應該不大,lottieLoaded其實是一個flutter函數,如下:
js.context["lottieLoaded"] = lottieLoaded;// 動畫播放完成觸發void lottieLoaded() {print("loaded");widget._animationListener?.call();}所以問題應該出現在這里,通過上面js代碼可以看到triggerEvent執行所有的callback都是有參數args的,而我們定義的lottieLoaded是一個無參函數,所以問題應該在這里,如果去執行一個有參的lottieLoaded就一定會出現NoSuchMethod錯誤。
所以我們要給lottieLoaded加一個參數,這里隨便添加一個即可,因為args沒有明確是什么類型,在js中是弱類型的所以這個參數類型可以隨意,我們使用String即可,如下:
void lottieLoaded(String args) {print("loaded");widget._animationListener?.call();}關注公眾號:BennuCTech,獲取更多干貨!
總結
以上是生活随笔為你收集整理的flutter web:lottie jssdk报错处理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Flutter:实现红包晃动效果
- 下一篇: 攻防:如何防止动态hook绕过jni签名