Question

我正在使用 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文件或其他本地图像），则它们将不会显示在网络视图中。

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

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

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

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

关于如何使这些HTML加载其本地资源的任何建议？（甚至意味着更改程序包或实施方式）

还发布了here

Answer 1

使用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);

Answer 2

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

Flutter加载HTML的本地资产

2 个答案: