Flutter webView加载html富文本_flutter 用loadrequest加载html字符串

作者：我家小花儿 | 2024-04-15 03:30:52

踩

flutter 用loadrequest加载html字符串

WebView 加载 Html 字符串

1.添加依赖

在项目的 pubspec.yaml 文件中添加 webview_flutter 插件的依赖：

dependencies:
webview_flutter: ^3.0.0
1
2

2.引入webView

在需要加载的页面引入webView头文件

import 'package:webview_flutter/webview_flutter.dart';
1

3.加载富文本

在需要加载的页面引入webView头文件

WebView(
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller){
          if(htmlStr.isNotEmpty){
            controller.loadHtmlString(htmlStr);
          }
        },
      ),
1
2
3
4
5
6
7
8

4.富文本适配

富文本如果没有头部的话，会出现字体过小，宽高不适应手机屏幕的现象。需要加入额外的样式修饰

String htmlStr = """<html>
                <head>
                <meta charset='UTF-8'>
                <title>
                ${data.title}
                </title>
                <style type=text/css> 
                body {font-size:20px; line-height:40px;background-color: transparent;}
                p {font-size:30px; line-height:40px;background-color: transparent;}
                div {font-size:25px; line-height:40px;background-color: transparent;text-align:center;color:#333333;}
                </style>
                </head>
                <body 
                style='padding-left: 15px;padding-right: 15px;padding-top: 15px;'>
                <div style='color:#FF0000;font-size:40px; line-height:80px;background-color: transparent;text-align:center;font-weight: bold;'>
                ${data.title}<div>
                <div>来源:${data.publishName} 发布时间:${data.publishTime}<div>
                ${data.content}
                </body> 
                </html>""";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

除此之外，loadHtmlString 还有一个可选参数 baseUrl ，作用是当 html 字符串中使用到了相对路径的 url 时，设置了 baseUrl 后 WebView 加载 html 请求相应 url 时就会带上 baseUrl，如 html 字符串中有显示图片，图片地址写的是相对路径，此时就可以使用 baseUrl 参数来解决，如下

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController controller){
    controller.loadHtmlString(htmlStr, baseUrl: baseUrl);
  },
)
1
2
3
4
5
6

5.WebView 高度自适应

WebView 默认无法做到高度自适应，即根据 html 内容高度自适应，当在 Column 等控件中使用 WebView 而不手动设置固定高度时则会报错。
如果要做到高度自适应，则需要用到 js 方法，在 html 中通过 js 监听页面大小的变化，然后获取页面高度再将高度传递到 Flutter 中，在 Flutter 中获取到高度后再动态改变 WebView 的高度。
实现步骤如下：

给 WebView 添加一个 JavascriptChannel 用于 js 与 Flutter 通信
在 html 中添加 script 使用 ResizeObserver 监听 body 元素的大小变化，在变化回调里调用上一步添加的 JavascriptChannel 发送页面高度的消息
在 Flutter 中接收到消息时，获取 js 发送过来的高度值，然后更新 WebView 的高度
代码如下：

String html = """
   <!DOCTYPE html>
        <html>
        <head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
          <body>
            <p> Hello WebView</p>
            <img src="https://image.baidu.com/search/detail?z=0&word=宠物图片&hs=0&pn=0&spn=0&di=&pi=227259&tn=baiduimagedetail&is=&ie=utf-8&oe=utf-8&cs=4162611394%2C4275913936&os=&simid=&adpicid=0&lpn=0&fr=albumsdetail&fm=&ic=0&sme=&cg=&bdtype=&oriquery=&objurl=https%3A%2F%2Ft7.baidu.com%2Fit%2Fu%3D4162611394%2C4275913936%26fm%3D193%26f%3DGIF&fromurl=ipprf_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bejj6_z%26e3Bv54AzdH3Fri5p5AzdH3Fnan0m9c8n%3F7p4_f576vj%3Dkwt17%267p4_4j1t74%3Dt4w2jfjw6vi%26vit1%3Dlad&gsm=0&islist=&querylist=&album_tab=动物&album_id=688"/>
          </body>
        </html>
        <script>
          const resizeObserver = new ResizeObserver(entries =>
          Resize.postMessage(document.documentElement.scrollHeight.toString()) )
          resizeObserver.observe(document.body)
        </script>
  """;

SizedBox(
  height: webViewHeight,
  child: WebView(
    javascriptMode: JavascriptMode.unrestricted,
    onWebViewCreated: (WebViewController controller){
      controller.loadHtmlString(html, baseUrl:bsaeUrl);
    },
    javascriptChannels: {
      JavascriptChannel(name: "Resize", onMessageReceived: (JavascriptMessage message) {
        double height = double.parse(message.message);
        setState(() {
          webViewHeight = height;
        });
      })
    }
  ),
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

如上，给 WebView 外面包了一层 SizeBox 用于限制 WebView 的高度，同时给 WebView 添加了名为 Resize 的 JavascriptChannel , 在 html 字符串中添加了 script 使用 js 的 ResizeObserver 监听页面元素大小变化，在变化回调里获取元素的 scrollHeight 值并将其发送到 Flutter，在 Flutter 的 JavascriptChannel 消息回调里获取高度值并更新 SizeBox 的高度。从而实现了 WebView 的高度自适应。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/425609?site