Flutter WebViewPlus -使用本地html字符串的css文件

7xzttuei 于 2023-05-29 发布在 Flutter

关注(0)|答案(2)|浏览(196)

我使用本地HTML字符串，其中我使用assets/html目录中的style.css：

final String html = """    <!DOCTYPE html>  
    <html>  
    <head>  
        <link rel="stylesheet" type="text/css" href="assets/html/style.css">  
        </head>  
      <body>  
       <h2>Simple HTML with External CSS</h2>  
        <p class="blue">This is a blue color paragraph</p>  
        <p class="red">This is a red color paragraph</p>  
        <p class="green">This is a green color paragraph</p>  
      </body>  
    </html>  """;

CSS文件是：

body{
background-color:lavender;
text-align: center;
}
h2{
font-style: italic;
size: 30px;
color: #f08080;
}
p{
font-size: 20px;
}

.blue{
color: blue;
}
.red{
color: red;
}
.green{
color: green;
}

WebViewPlus的代码是：

return Scaffold(
    backgroundColor: Colors.blue,
    body: WebViewPlus(
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (controller) {
        controller.loadString(html);
      },
    )
  );

结果只是一个简单的文本，而不使用style.css文件。我应该如何从assets文件夹引用css文件？href=”“应该使用什么<LOCATION_OF_CSS>
我修改了pubspec.yaml以包含assets/html文件夹。
谢谢！

flutter

来源：https://stackoverflow.com/questions/76357345/flutter-webviewplus-use-css-file-from-local-html-string

2条答案

按热度按时间

v8wbuo2f1#

要在HTML中使用CSS内容，您可以使用标记替换标记，并将CSS内容直接包含在HTML字符串中。
下面是一个如何修改HTML字符串以包含CSS内容的示例：

return Scaffold(
  backgroundColor: Colors.blue,
  body: FutureBuilder<String>(
    future: rootBundle.loadString('assets/html/style.css'),
    builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
      if (snapshot.hasData) {
        final cssContent = snapshot.data;
        final modifiedHtml = html.replaceAll(
          '<link rel="stylesheet" type="text/css" href="assets/html/style.css">',
          '<style type="text/css">$cssContent</style>',
        );

        return WebView(
          initialUrl: Uri.dataFromString(modifiedHtml, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(),
          javascriptMode: JavascriptMode.unrestricted,
        );
      } else if (snapshot.hasError) {
        return Center(
          child: Text('Error loading CSS file'),
        );
      } else {
        return Center(
          child: CircularProgressIndicator(),
        );
      }
    },
  ),
);

在此修改后的代码中，标记被替换为标记，CSS内容（cssContent）使用字符串插值（'$cssContent'）包含在标记中。
现在，当WebView加载修改后的HTML时，它将直接在HTML文档中应用CSS样式。
注意：确保CSS文件（style.css）包含有效的CSS语法，以避免渲染出现任何问题。

赞(0）回复(0）举报 2023-05-29

5us2dqdw2#

要从Flutter WebView中的assets文件夹引用CSS文件，您需要使用数据：URL方案。以下是如何修改代码以正确加载CSS文件：
首先，确保style.css文件包含在assets部分下的pubspec.yaml文件中：

flutter:
  assets:
    - assets/html/style.css

接下来，使用以下数据更新HTML字符串以引用CSS文件：URL方案：

final String html = """
  <!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" type="text/css" href="data:text/css;charset=UTF-8;base64,${base64Encode(File('assets/html/style.css').readAsBytesSync())}">
    </head>
    <body>
      <h2>Simple HTML with External CSS</h2>
      <p class="blue">This is a blue color paragraph</p>
      <p class="red">This is a red color paragraph</p>
      <p class="green">This is a green color paragraph</p>
    </body>
  </html>
""";

在上面的代码中，File（'assets/html/style.css'）.readAsBytesSync（）从assets文件夹加载CSS文件，并将其base64Encode编码为base64字符串。
现在，当您使用controller.loadString（html）在WebView中加载HTML字符串时，CSS文件将被正确引用并应用于HTML内容。
注意：确保CSS文件位于相对于pubspec.yaml文件的assets/html/style.css。
通过这些修改，WebView应该使用CSS文件中定义的样式呈现HTML内容。

赞(0）回复(0）举报 2023-05-29

我来回答

Flutter WebViewPlus -使用本地html字符串的css文件

2条答案

相关问题

热门标签

最新问答