问题
升级到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(); }