Flutter中有WebView吗？ [复制]

Posted 2023-02-23

【中文标题】Flutter中有WebView吗？ [复制]

【英文标题】：Is there WebView in Flutter? [duplicate]

【发布时间】：2018-08-14 03:27:13

【问题描述】：

我正在寻找 WebView。如何在颤振中显示我的 html 内容？ 实际上我们的书籍格式是 Html，所以我需要 WebView 或在 Flutter 编程中解析 Html 的方法。

【问题讨论】：

查看***.com/questions/43658910/…

在 pub 中，有一个插件：pub.dartlang.org/packages/flutter_webview_plugin，将其作为依赖项添加到 pubspec.yaml

【参考方案1】：

一个提供webview 小部件的 Flutter 插件现在可用于开发者预览版

用法

return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: const WebView(
        initialUrl: 'https://flutter.io',
        javascriptMode: JavaScriptMode.unrestricted,
      ),
    );

full code

【讨论】：

有没有办法将 html 字符串添加到这个 webview 小部件？？

@MounirElfassi，您可以使用Uri.dataFromString()。见this answer。

这在 ios 上可以正常工作，但在 android 上不能正常工作（模拟器和实际设备）

【参考方案2】：

你可以使用

> flutter_webview_plugin

这是一个允许Flutter 与原生WebView 通信的插件。

注意： webview 没有集成在 widget 树中，它是 Flutter 视图之上的原生视图。你将无法使用小吃吧、对话框...

【参考方案3】：

你可以使用我的插件flutter_inappwebview，这是一个Flutter插件，可以让你添加inline webviews与widget树集成或打开一个应用内浏览器窗口！与其他 webview 插件相比，它提供了很多事件、方法和选项！

主要类：

InAppWebView：Flutter Widget 用于添加

内联原生 WebView

集成到 Flutter 小部件树中。要在 iOS 上使用 InAppWebView 类，您需要通过向应用程序的 Info.plist 文件添加一个布尔属性（键为 io.flutter.embedded_views_preview 和值 YES）来选择嵌入视图预览。 ContextMenu：这个类代表 WebView 上下文菜单。 HeadlessInAppWebView：代表无头模式下的 WebView 的类。它可用于在后台运行 WebView，而无需将 InAppWebView 附加到小部件树。 InAppBrowser：使用原生 WebView 的应用内浏览器。 ChromeSafariBrowser：应用内浏览器在 Android 上使用 Chrome Custom Tabs / 在 iOS 上使用 SFSafariViewController。 InAppLocalhostServer：这个类允许你在http://localhost:[port]/上创建一个简单的服务器。默认port 值为8080。 CookieManager：这个类实现了一个单例对象（共享实例），它管理 WebView 实例使用的 cookie。 HttpAuthCredentialDatabase：该类实现了一个管理共享 HTTP 身份验证凭据缓存的单例对象（共享实例）。 WebStorageManager：这个类实现了一个单例对象（共享实例），它管理 WebView 实例使用的网络存储。

快速示例：

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async 
  WidgetsFlutterBinding.ensureInitialized();
  runApp(new MyApp());


class MyApp extends StatefulWidget 
  @override
  _MyAppState createState() => new _MyAppState();


class _MyAppState extends State<MyApp> 

  InAppWebViewController webView;
  String url = "";
  double progress = 0;

  @override
  void initState() 
    super.initState();
  

  @override
  void dispose() 
    super.dispose();
  

  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Container(
          child: Column(children: <Widget>[
            Container(
              padding: EdgeInsets.all(20.0),
              child: Text(
                  "CURRENT URL\n$(url.length > 50) ? url.substring(0, 50) + "..." : url"),
            ),
            Container(
                padding: EdgeInsets.all(10.0),
                child: progress < 1.0
                    ? LinearProgressIndicator(value: progress)
                    : Container()),
            Expanded(
              child: Container(
                margin: const EdgeInsets.all(10.0),
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.blueAccent)),
                child: InAppWebView(
                  initialUrl: "https://flutter.dev/",
                  initialHeaders: ,
                  initialOptions: InAppWebViewGroupOptions(
                    crossPlatform: InAppWebViewOptions(
                        debuggingEnabled: true,
                    )
                  ),
                  onWebViewCreated: (InAppWebViewController controller) 
                    webView = controller;
                  ,
                  onLoadStart: (InAppWebViewController controller, String url) 
                    setState(() 
                      this.url = url;
                    );
                  ,
                  onLoadStop: (InAppWebViewController controller, String url) async 
                    setState(() 
                      this.url = url;
                    );
                  ,
                  onProgressChanged: (InAppWebViewController controller, int progress) 
                    setState(() 
                      this.progress = progress / 100;
                    );
                  ,
                ),
              ),
            ),
            ButtonBar(
              alignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Icon(Icons.arrow_back),
                  onPressed: () 
                    if (webView != null) 
                      webView.goBack();
                    
                  ,
                ),
                RaisedButton(
                  child: Icon(Icons.arrow_forward),
                  onPressed: () 
                    if (webView != null) 
                      webView.goForward();
                    
                  ,
                ),
                RaisedButton(
                  child: Icon(Icons.refresh),
                  onPressed: () 
                    if (webView != null) 
                      webView.reload();
                    
                  ,
                ),
              ],
            ),
        ])),
      ),
    );
  

截图：

【参考方案4】：

如果你只是想显示一个静态的 html 内容，你可以试试这个包：flutter_html_view。 Flutter 只支持全屏 webview，暂不支持内联 webview。