向上或向下滚动网页(由Flutter for Web创建)时，嵌入式Youtube视频小部件消失 [英] Embedded Youtube video widget disappears while the web page (created by Flutter for Web) is scrolled up or down

问题描述

我设法将嵌入的Youtube视频放在使用Flutter for Web创建的网页上.问题在于，该视频窗口小部件在向上或向下滚动页面时消失，而在滚动停止时重新出现. Chrome开发者控制台显示此错误remote.js:34 GET chrome-extension://invalid/ net::ERR_FAILED Firefox不会发出任何错误消息，但是Youtube视频的闪烁也会在那里发生.该网页似乎在滚动过程中不断地一次又一次地获取Youtube视频信息.我该如何解决?

I managed to put an embedded Youtube video on a web page created using Flutter for Web. The problem is that this video widget disappears while the page is scrolled up or down, and reappears when the scrolling stops. The Chrome developer console shows this error remote.js:34 GET chrome-extension://invalid/ net::ERR_FAILED Firefox doesn't issue any error message but the flickering of the Youtube video happens there as well. It appears that the webpage continually fetches the Youtube video info again and again during the scroll. How do I fix this?

import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:ui' as ui;

void main() {
// ignore: undefined_prefixed_name
  ui.platformViewRegistry.registerViewFactory(
      'video',
      (int viewId) => html.IFrameElement()
        ..width = '640'
        ..height = '360'
        ..src = 'https://www.youtube-nocookie.com/embed/IyFZznAk69U'
        ..style.border = 'none');

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Container(
                color: Colors.purple,
                child: Center(
                  child: Container(
                    height: 360,
                    width: 640,
                    color: Colors.green,
                    child: HtmlElementView(viewType: "video"),
                  ),
                ),
              ),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
              Text("test", textDirection: TextDirection.ltr),
            ],
          ),
        ),
      );
    });
}
}

推荐答案

我认为这是Flutter的已知问题，因为正在重建视图，因此它也会重建网页.奇怪的.

I believe this is a known issue for Flutter, since the view is being rebuilt it rebuilds the webpage as well. Odd.

如果您查看 flutter_webview_plugin ，作者写道:

If you look at flutter_webview_plugin the author writes:

警告:Web视图未集成在窗口小部件树中，它是抖动视图顶部的本机视图.您将看不到小吃条，对话框或其他闪烁的窗口小部件，这些窗口小部件会与网络视图所占据的屏幕区域重叠.

Warning: The webview is not integrated in the widget tree, it is a native view on top of the flutter view. You won't be able see snackbars, dialogs, or other flutter widgets that would overlap with the region of the screen taken up by the webview.

如果您可以找到一种方法来获取小部件树的Webview，我敢打赌它无需刷新就可以工作，但是它当然可以覆盖其他所有内容.

If you can find a way to get the webview OUT of the widget tree, I bet it works without refreshing, it would of course render over everything else though.

让我知道您是否因为我在同一条船上而无法解决问题.

Let me know if you figure out a work around because I'm in the same boat.

这篇关于向上或向下滚动网页(由Flutter for Web创建)时，嵌入式Youtube视频小部件消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！