当网页(由 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:

警告:webview 没有集成在小部件树中，它是 Flutter 视图之上的原生视图.您将无法看到与 webview 占据的屏幕区域重叠的小吃栏、对话框或其他颤动小部件.

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屋！