flutter 抖动网页中的WebView

kmbjn2e3  于 2022-11-25  发布在  Flutter
关注(0)|答案(4)|浏览(180)

我尝试在Flutter for Web中显示Web视图,但出现以下错误:

PlatformException(Unregistered factory, No factory registered for viewtype 'plugins.flutter.io/webview', null)

有没有办法在Flutter Web中显示WebView?

xghobddn

xghobddn1#

编辑:以下是截至2021年5月16日的可运行示例:

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

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

  runApp(Directionality(
    textDirection: TextDirection.ltr,
    child: SizedBox(
      width: 640,
      height: 360,
      child: HtmlElementView(viewType: 'hello-world-html'),
    ),
  ));
}

这篇文章的其余部分只是复制了上面的内容,并且是原作者的原始文章

您首先需要执行platformViewRegistry:

ui.platformViewRegistry.registerViewFactory(
  'hello-world-html',
  (int viewId) => IFrameElement()
    ..width = '640'
    ..height = '360'
    ..src = 'https://www.youtube.com/embed/IyFZznAk69U'
    ..style.border = 'none');

看看example。在这个例子中,旧的库被导入(在29.09.19),但是如果你改变'flutter'上的'flutter_web',它必须工作。
此外,您不仅可以使用'IFrameElement',也可以使用一般的html:

ui.platformViewRegistry.registerViewFactory("simple_div", (int viewId) {
  DivElement element = DivElement();
  ...
  return element;
wribegjk

wribegjk2#

您可以尝试使用easy_web_view插件。
对于iOS和Android,它使用原生的webview_flutter插件,对于Web,它从@alex89607答案中做类似的事情。

vdzxcuhz

vdzxcuhz3#

@mohamed-salah的回答很有帮助,但是我的屏幕上只有一个加载符号。我们需要把webview放在WillPopScope小部件中。使用以下代码正确加载webview-
pubspec.yaml中添加相关性

flutter_webview_plugin: ^0.3.9+1 // replace with latest version

StatefulWidget类中,使用以下代码-

class _WebViewLoadingState extends State<Details> {
  final _webViewPlugin = FlutterWebviewPlugin();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // on pressing back button, exiting the screen instead of showing loading symbol
    _webViewPlugin.onDestroy.listen((_) {
      if (Navigator.canPop(context)) {
        // exiting the screen
        Navigator.of(context).pop();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // WillPopScope will prevent loading
    return WillPopScope(
      child: WebviewScaffold(
        url: "https://www.google.com",
        withZoom: false,
        withLocalStorage: true,
        withJavascript: true,
        appCacheEnabled: true,
        appBar: AppBar(
          title: Text("Browser"),
        ),
      ),
      onWillPop: () {
        return _webViewPlugin.close();
      }
    );
  }
}
n8ghc7c1

n8ghc7c14#

您可以使用flutter_inappwebview插件(我是它的作者)版本6.x.x,它引入了Web和macOS平台支持!
目前可用的最新版本6是6.0.0-beta.16
它在底层使用iframe HTML元素,因此不幸的是,它的功能非常有限。
请查看官方安装Web联机文档以开始安装。

相关问题