时间戳

首页 > 解决方案 > 使用 HtmlElementView Widget 时如何触发函数？

javascript - 使用 HtmlElementView Widget 时如何触发函数？

问题描述

我正在尝试widget.onTap()在以下代码中调用函数 ()

GestureDetector(
  onTap: () {
    widget.onTap()
  },
  child: Container(
     height: 1.9 * widget.height,
     width: 1.2 * widget.width,
        child: HtmlElementView(viewType: 'liquid-button', key: UniqueKey(),),
     ),
  )

我已经注册了我的“液体按钮”

ui.platformViewRegistry.registerViewFactory('liquid-button', (int viewId) {
var element = html.IFrameElement()
        ..style.border = 'none'
        ..srcdoc = """
        <!DOCTYPE html>
          <head>
          </head>
          <body>
            <svg class="liquid-button"
          ...
         """
   return element;
});

问题是无论我尝试什么，我都无法从用户那里捕获任何东西。GestureDetector 不起作用，按钮也不起作用。我可以在 JS 中触发一些代码，但我需要在 Dart 中处理它。这可能吗 ？

标签： javascripthtmlflutterdartiframe

解决方案

我刚刚找到了这个的解决方法。所以基本上，我们可以利用window.localStorage，它可以从flutter和html中访问，并在flutter中添加监听器来处理window.localStorage的任何变化

  1. 在颤振中添加监听器

    最终存储 webLocalStorage = window.localStorage;

    htmlListener(){ String buttonClicked = webLocalStorage["buttonClicked"]; if(buttonClicked=="yes"){ //做任何事情 }else{ Future.delayed(Duration(milliseconds: 100), (){ htmlListener(); }); } }

  2. 对 HTML 中的网络存储进行一些更改

    var webLocalStorage = window.localStorage; webLocalStorage["buttonClicked"] = "是";

反之亦然，那就是从 html 中听，在颤动中改变。

推荐阅读