如何仅忽略小部件上的滚动事件？

Question

我在Html 小部件中显示iframe，在ListView.builder 中。

由于 iframe，我无法滚动页面。当我开始从它们之间的空白处拖动时，我只能滚动。

我试图用AbsorbPointer 和IgnorePointer 包装Html 小部件，它们正在工作，我可以滚动，但我不想完全禁用iframe 上的指针事件。因为其中一些是可点击的（例如它有一个标签栏，例如：比特币|第一张图上的以太币）

问题是，我是否可以吸收这些 iframe 的所有拖动和滚动事件，让用户正常滚动页面，同时也让他们点击 iframe？

class HubContentWidget extends StatefulWidget {
  const HubContentWidget({
    Key? key,
    required this.hub,
  }) : super(key: key);

  final HubCategory hub;

  @override
  State<HubContentWidget> createState() => _HubContentWidgetState();
}

class _HubContentWidgetState extends State<HubContentWidget> {
  late Future<List<HubItem>> _hubFuture;
  @override
  void initState() {
    _hubFuture = Service.getHubItems(uri: widget.hub.uri);
    super.initState();
  }

  bool absorbPointers = false;
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<HubItem>>(
      future: _hubFuture,
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          final items = snapshot.data!;
          if (items.isEmpty) {
            return Center(child: Text('No items found'));
          }
          return ListView.builder(
            shrinkWrap: true,
            itemCount: items.length,
            itemBuilder: (context, index) {
              /// This widget takes all the pointer events 
              /// and prevents scrolling.
              return Html(
                data: items[index].content.formatted,
                navigationDelegateForIframe: (request) {
                  return NavigationDecision.navigate;
                },
              );
            },
          );
        } else {
          return CircularProgressIndicator.adaptive();
        }
      },
    );
  }
}

来自flutter_html-2.2.1 的 HTML 小部件

iframe 示例

<p><iframe title="The rise and fall of cryptocurrency" aria-label="Interactive line chart" id="datawrapper-chart-acQ2e" src="https://datawrapper.dwcdn.net/acQ2e/4/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="450"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
</script></p>

Answer 1

好吧，我认为这种方式可以让您滚动，希望这也适用于您，

我将构建器的scrollDirection 设置为Axis.vertical 并用SingleChildScrollView 包装Html：

ListView.builder(
        shrinkWrap: true,
        itemCount: 10,
        scrollDirection: Axis.vertical,
        itemBuilder: (context, index) {
          return SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            physics: const NeverScrollableScrollPhysics(),
            child: Html(
              data:
                  """<p><iframe title="The rise and fall of cryptocurrency" aria-label="Interactive line chart" id="datawrapper-chart-acQ2e" src="https://datawrapper.dwcdn.net/acQ2e/4/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="450"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(e){if(void 0!==e.data["datawrapper-height"]){var t=document.querySelectorAll("iframe");for(var a in e.data["datawrapper-height"])for(var r=0;r<t.length;r++){if(t[r].contentWindow===e.source)t[r].style.height=e.data["datawrapper-height"][a]+"px"}}}))}();
            </script></p>""",
              navigationDelegateForIframe: (request) {
                return NavigationDecision.navigate;
              },
            ),
          );
        },
      ),

这个结果来自你的 iframe 示例，对我来说效果很好，结果如下：

看看这个结果，我通过点击 iframe 滚动，尝试一下，让我知道结果

Answer 2

我认为@mohammad esmaili 的回答应该对您的情况有所帮助。但是，如果您仍然有问题，因为使用旧的颤振或 sdk 并且不打算迁移。

您可以添加逻辑（布尔值）来打开/关闭 AbsorbPointer。 一些示例 UX 场景：

• 添加一个按钮或开关，可以启用/禁用每个 iframe 的 AbsorbPointer
• 当用户单击区域 1 次时，在容器/iframe 中添加逻辑，它将关闭/关闭吸收指针

Answer 3

如果需要，可以将 ListView.builder 物理属性与 NeverScrollableScrollPhysics() 一起使用 您还可以将其绑定到可以用单行确定的变量，例如；可拖动==真？ NeverScrollableScrollPhysics(): AlwaysScrollableScrollPhysics