flutter web:lottie jssdk报错处理

简介: 升级到Flutter 2.0后,在使用过程中发现会报错类似NoSuchMethod: call(),导致后续的动画显示不出来。(注意:这个问题是将渲染器改成Html Render之后出现的,不知道在CanvasKit上会不会出现)但是报错的堆栈信息根本没用,除了知道源头是lottie.js中的triggerEvent函数

问题


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


目录
相关文章
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
238 1
|
7月前
|
前端开发 Java API
Spring Cloud Gateway Server Web MVC报错“Unsupported transfer encoding: chunked”解决
本文解析了Spring Cloud Gateway中出现“Unsupported transfer encoding: chunked”错误的原因,指出该问题源于Feign依赖的HTTP客户端与服务端的`chunked`传输编码不兼容,并提供了具体的解决方案。通过规范Feign客户端接口的返回类型,可有效避免该异常,提升系统兼容性与稳定性。
524 0
|
缓存 Dart 开发工具
解决Flutter报错The method ‘File.create‘ has fewer named arguments than those of overridden method
解决Flutter报错The method ‘File.create‘ has fewer named arguments than those of overridden method
227 3
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
169 2
【Azure Web Job】Azure Web Job执行Powershell脚本报错 The term 'Select-AzContext' is not recognized as the name
【Azure Web Job】Azure Web Job执行Powershell脚本报错 The term 'Select-AzContext' is not recognized as the name
127 3
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
197 4
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
835 3
|
Dart
Flutter使用Scaffold报错。
Flutter使用Scaffold报错。
195 3
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
832 2