当网页（由 Flutter for Web 创建）向上或向下滚动时，嵌入式 Youtube 视频小部件消失

Question

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

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

Answer 1

我相信这是 Flutter 的一个已知问题，因为视图正在重建，它也会重建网页。奇怪的。

如果你看一下flutter_webview_plugin，作者写道：

警告：webview 没有集成到 widget 树中，它是 flutter 视图之上的原生视图。您将看不到与 Web 视图占据的屏幕区域重叠的小吃栏、对话框或其他 Flutter 小部件。

如果你能找到一种方法将 webview 从 widget 树中取出，我敢打赌它无需刷新即可工作，它当然会渲染到其他所有内容上。

如果您找到解决方法，请告诉我，因为我也有同样的情况。