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


目录
相关文章
|
3月前
|
缓存 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
60 3
|
8天前
|
存储 测试技术 Shell
Flutter UT太多导致跑覆盖率报错
Flutter UT太多导致跑覆盖率报错
18 2
|
3月前
【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
|
3月前
|
Dart 前端开发 Java
|
3月前
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
Flutter更改主题颜色报错:type ‘Color‘ is not a subtype of type ‘MaterialColor‘
43 4
|
3月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
137 2
|
3月前
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
解决Flutter报错The named parameter |method ‘xxxx‘ isn‘t defined.
126 3
|
3月前
|
Dart
Flutter使用Scaffold报错。
Flutter使用Scaffold报错。
43 3
|
3月前
|
iOS开发
解决Flutter运行IOS报错:Podfile is out of date
解决Flutter运行IOS报错:Podfile is out of date
71 1
|
3月前
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.