当光标位于 youtube_player_iframe 顶部时，鼠标滚动卡住

Question

鼠标滚动卡在视频顶部。我正在使用youtube_player_iframe。另外，我不想重建 iframe 小部件。我试图用它包裹它，pointer_interceptor但它没有解决问题。我的首要任务是解决滚动问题并避免在滚动时重建小部件。把所有东西都包裹起来SingleChildScrollView并不是一个好的做法。

• 我不想像这个包一样使用 YouTube API
• 需要实现flutter-web

如果您有其他处理方法，请随时分享。谢谢

检查这个输出视频

测试小部件

import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:pointer_interceptor/pointer_interceptor.dart';
import 'package:sliver_tools/sliver_tools.dart';

import 'package:youtube_player_iframe/youtube_player_iframe.dart';

class YoutubeVideoAdTestScreen2 extends StatefulWidget {
  YoutubeVideoAdTestScreen2({Key? key}) : super(key: key);

  @override
  _YoutubeVideoAdTestScreen2State createState() =>
      _YoutubeVideoAdTestScreen2State();
}

class _YoutubeVideoAdTestScreen2State extends State<YoutubeVideoAdTestScreen2> {
  YoutubePlayerController _controller = YoutubePlayerController(
    initialVideoId: '1oF3pI5umck',
    params: YoutubePlayerParams(
      // Defining custom playlist
      startAt: Duration(seconds: 30),
      showControls: true,
      showFullscreenButton: true,
    ),
  );

  @override
  void dispose() {
    super.dispose();
    _controller.close();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          MultiSliver(
            children: [
              ...List.generate(
                4,
                (index) => Container(
                  color: index % 2 == 0 ? Colors.amber : Colors.cyanAccent,
                  height: index * 50 + 100,
                ),
              ).toList(),
              SliverToBoxAdapter(
                child: YoutubePlayerIFrame(
                  gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
                  controller: _controller,
                  aspectRatio: 16 / 9,
                ),
              ),
              ...List.generate(
                4,
                (index) => Container(
                  color: index % 2 == 0 ? Colors.amber : Colors.cyanAccent,
                  height: index * 50 + 100,
                ),
              ).toList(),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

在 Flutter 应用程序中嵌入 HTML 元素的问题是，这些元素的渲染方式不同。dart api 提供了以下iframes信息pointer events：

由于跨源iframe元素的安全限制，Flutter无法将指针事件调度到 HTML 视图。如果 aniframe是事件的目标，则不会向包含 的窗口通知该事件。特别是，这意味着任何落在 上的指针事件都iframe不会被 Flutter 看到，因此 HTML 视图无法参与其他 widget 的手势检测。

对此没有理想的解决方案，要么在悬停 时失去滚动的能力iframe，要么失去与 交互的能力 iframe，但仍然在其上滚动。

这个想法很简单：将另一个包裹AspectRatio在PointerInterceptora 中Stack，以便仍然提供滚动行为，但遗憾的是您无法iframe再与之交互。

.....
SliverToBoxAdapter(
  child: Stack(
    children: [
      YoutubePlayerIFrame(
        gestureRecognizers: <Factory<OneSequenceGestureRecognizer>>{},
        controller: _controller,
        aspectRatio: 16 / 9,
      ),
      PointerInterceptor(
        child: AspectRatio(
          aspectRatio: 16 / 9,
        ),
      ),
    ],
  ),
),
......

当然有不同的方法来实现这一点，但我发现如果您只想滚动iframe. 玩家仍然可以通过其控制_controller，所以play()，stop()等等似乎仍然有效。

编辑：
这PointerInterceptor是一个 pub.dev 包：https ://pub.dev/packages/pointer_interceptor