android - 如何在 web 模式下将 flutter_web_view 转换为 HtmlElementView

Question

这可能是一个重复的问题，因为我已经看到很多与 iframe、webview 和所有这些有关的问题，但在我研究它们时，每个问题都让我更加困惑。目前，我正在使用 WebView 小部件在我的移动应用程序中显示 WebView 。我希望现在为 web 构建，但 WebView 不支持 web，所以我一直在寻找替代方法。我从 flutter 文档中了解了 HtmlElementView。试图研究它，但我似乎找不到任何明确的方法我应该用它来解决我的问题。

这是我的代码:

    Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          margin: EdgeInsets.fromLTRB(0, 15, 0, 0),
          child: !kIsWeb
              ? WebView(
                  initialUrl: this.widget._url,
                  javascriptMode: JavascriptMode.unrestricted,
                  onPageStarted: this._pageStarted,
                )
              : HtmlElementView(
                  viewType: '',
                ),
        ),
      ),
    );
  }

根据我的代码，我在未针对 web 编译时构建 WebView，在针对 web 编译时构建 HtmlElementView。尽管我不想这么说，但这是我目前对 HtmlElementView 的了解。从文档中，viewType 是采用一个我真的不知道的字符串。

我到底想做什么？ WebView 中加载的内容是动态的，因此我希望在 HtmlElementView 中加载相同内容。任何可以帮助我的帮助或 Material 都将不胜感激，因为我对所有这些都不熟悉。谢谢。

Answer 1

我目前正在进行相同的探索，并发现了这个方便、简单的示例:

https://codepen.io/riccio85/pen/wvMeaMe

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

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

  runApp( Padding(
        padding: EdgeInsets.all(25),
        child: SizedBox(
          width: 640,
          height: 360,
          child: HtmlElementView(viewType: 'hello-html'),
      ),
    ),
  );
}

它并不完美，但它似乎可以满足我的需要。也就是说，我最终也以与您的示例相同的方式检查网络，否则使用 webview_flutter。

目前整个事情似乎有点不足，希望情况有所改善。