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


目录
相关文章
|
2月前
|
应用服务中间件 nginx
【报错】Failed to start A high performance web server and a reverse proxy server.
【报错】Failed to start A high performance web server and a reverse proxy server.
111 2
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
5月前
|
应用服务中间件
idea 调试报错 Illegal access: this web application instance has been stopped already.
idea 调试报错 Illegal access: this web application instance has been stopped already.
78 0
|
1月前
|
Java 应用服务中间件
解决tomcat启动报错:无法在web.xml或使用此应用程序部署的jar文件中解析绝对的url [http:java.sun.com/jsp/jstl/core]
解决tomcat启动报错:无法在web.xml或使用此应用程序部署的jar文件中解析绝对的url [http:java.sun.com/jsp/jstl/core]
134 1
|
3月前
|
Web App开发 Ubuntu 应用服务中间件
Flutter笔记:Web支持原理与实践
Flutter笔记:Web支持原理与实践
104 0
|
3月前
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
Flutter笔记:使用Flutter构建响应式PC客户端/Web页面-案例
58 0
|
3月前
|
Dart 小程序 前端开发
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
WebSocket 解析与应用(包含web前端、服务端、小程序、dart/flutter中的用法)
197 0
|
8月前
|
应用服务中间件 Linux 网络安全
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决
【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content (混合加载/Mixed Content)如何解决
|
8月前
|
应用服务中间件 Linux Windows
tomcat部署web项目报错:Could not initialize class sun.awt.X11GraphicsEnvironment
tomcat部署web项目报错:Could not initialize class sun.awt.X11GraphicsEnvironment
190 0
|
8月前
|
前端开发 Java Maven
项目web.xml中配置DispatcherServlet时,红色波浪线报错(Cannot resolve Servlet ‘DispatcherServlet‘)
项目web.xml中配置DispatcherServlet时,红色波浪线报错(Cannot resolve Servlet ‘DispatcherServlet‘)