当光标位于YouTube_Player_IFRAME顶部时，鼠标滚动卡住 [英] Mouse scroll stuck while cursor is on top of youtube_player_iframe

问题描述

鼠标滚动停留在视频顶部。我正在使用youtube_player_iframe。另外，我不想重新构建IFRAME小部件。我试图用pointer_interceptor包装它，但是没有解决问题。我的首要任务是解决滚动问题，避免在滚动时重新构建小部件。将所有内容包装在SingleChildScrollView上不是好做法。

• 我不想像这样使用YouTube API
• 需要实现颤网

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

检查此输出video

测试小工具

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

HTML

在Ffltter App中嵌入推荐答案元素的问题在于，这些元素的呈现方式不同。DART API提供有关iframes及其pointer events的信息：

由于跨域iframe元素的安全限制，Ffltter无法将指针事件分派到HTML视图。如果iframe是事件的目标，则不会通知包含的窗口该事件。具体地说，这意味着任何落在iframe上的指针事件都不会被Ffltter看到，因此HTML视图不能参与其他小工具的手势检测。

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

想法很简单：将另一个AspectRatio包装在一个PointerInterceptor中，放在一个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

这篇关于当光标位于YouTube_Player_IFRAME顶部时，鼠标滚动卡住的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！