Flutter 为 HTML 加载本地资源答案

【问题标题】：Flutter load local assets for HTMLFlutter 为 HTML 加载本地资源
【发布时间】：2019-06-21 05:43:50
【问题描述】：

我正在通过以下方式使用 flutter_webview 包将 本地 HTML 文件加载到小部件中：

FutureBuilder<String>(
  future: LocalLoader().loadLocal(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
//      return Text("${snapshot.data}");
      return WebView(
        initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(),
        javascriptMode: JavascriptMode.unrestricted,
      );

    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }
    return CircularProgressIndicator();
  }
)

它可以很好地加载 HTML，但是如果标签指向其他资源（例如同一位置的 CSS 文件或其他本地图像），它们将不会显示在 webview 中。

这些资产（CSS 和图像文件）被添加到项目中从 HTML（相对本地路径）指定路径的位置以及 pubspec 中。

例如，其中一个 HTML 文件包含此元素：

<link rel=stylesheet href=styles/main.css>

当 HTML 文件加载到 webview 中时，CSS 不会反映该页面的样式。如果我在 HTML 中手动添加/编写 CSS（使用 <style> 元素来定义它），它将正常工作。

有什么建议可以让这些 HTML 加载它们的本地资源吗？（即使它意味着改变包或它的实现方式）

还发帖here

【问题讨论】：

在您的 Flutter 应用程序中实现一个简单的 Web 服务器，并将 Web 视图指向该 IP/端口，如 medium.com/@segaud.kevin/… 中所述，另请参阅 github.com/fluttercommunity/flutter_webview_plugin/issues/23 中的讨论
我之前已经检查过这些链接，但 TBH 似乎为一个简单的 html ios/android 应用程序实现一个 Web 服务器是最重要的。不过会检查一下，谢谢。
只有几行代码。您可以投票并关注github.com/flutter/flutter/issues/27086 以获得内置解决方案。

标签： flutter assets flutterwebviewplugin

【解决方案1】：

我已经使用我的本地 .html、.css 和图像尝试了您的代码，这就是我所拥有的：

Flutter WebView的实现好像有问题，所以我在Github提交了这个。

作为一种解决方法，我认为您的一个选择是使用不同的插件，即“flutter_inappwebview”。

我重复使用了您的代码。唯一的区别是，我改变了这部分：

return WebView(
        initialUrl: new Uri.dataFromString(snapshot.data, mimeType: 'text/html').toString(),
        javascriptMode: JavascriptMode.unrestricted,
      );

到这里：

return SafeArea(
          child: Container(
            margin: const EdgeInsets.all(10.0),
            decoration:
                BoxDecoration(border: Border.all(color: Colors.blueAccent)),
            child: InAppWebView(
              // initialUrl: "https://youtube.com/",
              initialFile: "assets/sample.html",
              initialHeaders: {},
              initialOptions: InAppWebViewGroupOptions(
                  crossPlatform: InAppWebViewOptions(
                debuggingEnabled: true,
              )),
              onWebViewCreated: (InAppWebViewController controller) {
                _webViewController = 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;
                });
              },
            ),
          ),
        );

结果如下：

这是我本地的 .html 和 .css，只需将任何图像替换为“flutter_logo.png”即可。

body{
    background-color: aliceblue;
}
h1{
    text-align: center;
    font-style: bold;
    color: blue;
}
p{
    text-align: center;
    font-style: italic;
    color: cornflowerblue
}
img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 15%;
    width: 15%;
}

<!DOCTYPE html>
<meta charset="utf-8">
<title>Sample HTML</title>
<html>
    <head>
        <link rel="stylesheet" href="sample.css">
    </head>
    <body>
        <h1>Flutter Webview</h1>
        <p>This paragraph have styles.</p>
    </body>
    <img src="flutter_logo.png" alt="">
</html>

【讨论】：

【解决方案2】：

使用 Uri.directory 方法似乎对我有用。它呈现所有链接的 css 和 javascript 文件，而不会以字符串形式加载数据。

final uri = Uri.directory("$your_local_file_path");
final uriString = uri.toString().substring(0, uri.toString().length - 1); /// Remove final slash symbol
_webViewController.loadUrl(uriString);

【讨论】：