Flutter webView加载html富文本

We bVi ew 加载 Html 字符串

1.添加 依赖

在项目的 pub s pe c.yaml 文件中添加 webview _flutter 插件的依赖：

dependencies:
webview_flutter: ^3.0.0

2.引入 webView

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

import 'package:webview_flutter/webview_flutter.dart';

3.加载富文本

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

WebView(
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller){
          if(htmlStr.isNotEmpty){
            controller.loadHtmlString(htmlStr);
          }
        },
      ),

4.富文本 适配

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

String htmlStr = """&lt;html&gt;
                &lt;head&gt;
                <meta charset='UTF-8'&gt;
                <title&gt;
                ${data.title}
                </title&gt;
                <style type=text/css&gt; 
                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&gt;
                </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>""";

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

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  onWebViewCreated: (WebViewController controller){
    controller.loadHtmlString(htmlStr, baseUrl: baseUrl);
  },
)

5.WebView 高度自适应

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

给 WebView 添加一个 JavascriptCha nn el 用于 js 与 Flutter 通信
在 h tml 中添加 sc ript 使用 ResizeObserver 监听 bod y 元素的大小变化，在变化回调里调用上一步添加的 Javasc riptCha nnel 发送页面高度的消息
在 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&amp;word=宠物图片&amp;hs=0&amp;pn=0&amp;spn=0&amp;di=&amp;pi=227259&amp;tn=baiduimagedetail&amp;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;
        });
      })
    }
  ),
)

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