6

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

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 加载其本地资源的任何建议？（即使它意味着改变包或它的实现方式）

也张贴在这里

4

2 回答 2

0

我已经使用我的本地 .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>

于 2020-09-29T21:04:08.353 回答
0

使用 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);
于 2020-09-27T05:05:59.980 回答