Flutter中如何忽略Html组件内iframe的滚动事件并保留点击交互？

问题 #

在ListView.builder中使用flutter_html-2.2.1的Html组件展示iframe时，页面无法正常滚动，仅能在组件间隙拖动实现滚动。尝试用AbsorbPointer或IgnorePointer包裹Html组件后，页面滚动恢复，但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();
        }
      },
    );
  }
}

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>

解决方案 #

核心思路是自定义指针拦截逻辑，只拦截滚动/拖拽类事件，放行点击事件。以下是两种可行方案：

方案1：用Listener+GestureDetector包裹Html组件 #

通过Listener监听垂直拖拽事件，将滚动控制权交还给父级ListView；同时用GestureDetector确保点击事件能传递到iframe内部。

修改itemBuilder中的代码：

itemBuilder: (context, index) {
  return Listener(
    onPointerMove: (event) {
      // 检测到垂直方向拖拽时，让父级ListView处理滚动
      if (event.delta.dy.abs() > event.delta.dx.abs()) {
        PrimaryScrollController.of(context)?.position.applyPhysics();
      }
    },
    child: GestureDetector(
      onTap: () {}, // 空回调确保点击事件被识别并传递
      behavior: HitTestBehavior.translucent,
      child: Html(
        data: items[index].content.formatted,
        navigationDelegateForIframe: (request) {
          return NavigationDecision.navigate;
        },
      ),
    ),
  );
},

方案2：利用flutter_html的customRender自定义iframe渲染 #

针对iframe单独替换渲染组件，用WebView更精准控制指针事件，保留点击、拦截滚动。此方案需要引入webview_flutter依赖。

修改itemBuilder中的代码：

itemBuilder: (context, index) {
  return Html(
    data: items[index].content.formatted,
    navigationDelegateForIframe: (request) {
      return NavigationDecision.navigate;
    },
    customRender: {
      'iframe': (context, child, attributes, _) {
        final src = attributes['src'];
        final height = attributes['height'] != null ? double.parse(attributes['height']!) : 450;
        return Listener(
          onPointerScroll: (event) {
            // 拦截iframe自身滚动，让父级ListView处理
            event.handled = true;
            PrimaryScrollController.of(context)?.position.scrollBy(event.scrollDelta.dy);
          },
          onPointerMove: (event) {
            if (event.delta.dy.abs() > 2) {
              event.handled = true;
              PrimaryScrollController.of(context)?.position.applyPhysics();
            }
          },
          child: GestureDetector(
            onTap: () {},
            behavior: HitTestBehavior.translucent,
            child: SizedBox(
              width: double.infinity,
              height: height,
              child: WebView(
                initialUrl: src,
                javascriptMode: JavascriptMode.unrestricted,
                gestureRecognizers: {
                  Factory(() => EagerGestureRecognizer()),
                },
              ),
            ),
          ),
        );
      },
    },
  );
},

补充优化 #

• 保留iframe的scrolling="no"属性，避免iframe内部出现独立滚动条。
• 方案2需在pubspec.yaml中添加webview_flutter: ^3.0.0（或兼容flutter_html-2.2.1的版本）。

内容的提问来源于stack exchange，提问作者mirkancal