WebView 加载 Html 字符串

1.添加依赖

在项目的 pubspec.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 = """<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>""";

除此之外，loadHtmlString 还有一个可选参数 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 方法，在 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;});})}),
)

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

Flutter webView加载html富文本相关推荐

android webview 样式解析不正确,解决Android Webview加载Html富文本，h5字体样式不起作用问题...
问题起因:WebView作为整个页面的一个部分展示,展示的是一段H5片段(Html中body标签中的部分) 问题描述:H5前端设置好的字体大小,在WebView中展示时不起作用,导致字体大小都一样问 ...
Flutter webview加载视频无法全屏
Flutter webview加载视频无法全屏先上个github的链接吧:https://github.com/flutter/flutter/issues/27101#issuecomment-5 ...
android 加载显示富文本——TextView显示富文本和WebView显示富文本，WebView显示图片适配屏幕宽度
TextView加载显示添加依赖 implementation 'com.zzhoujay.richtext:richtext:3.0.8' implementation 'com.zzhoujay ...
Flutter ------- WebView加载网页
在Flutter 加载网页?也是有WebView的哦,和Android一样 1.添加依赖 dependencies: flutter_webview_plugin: ^0.2.1+2 2.导入库 im ...
flutter webview加载http图片失败处理
1.简介开始接手flutter项目,项目flutter版本2.5.3,目前最新2.10.3. 项目中使用webview为 flutter_webview_pro 1.0.0 源码修改版,已经支持we ...
微信小程序开发加载html富文本数据
最近项目上遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过w ...
ios label html图片,iOS UILabel与UITextView加载图片富文本点击看大图
背景: 功能:回复列表要求:界面按UI给的效果图收到的数据:带各种标签的html格式的字符串(包括web端的表情图片) 如果只是想简单的加载HTML(包括图片),点击这里. 解决方案:UILabe ...
用UIWebview、UILabeL、UITextView加载html富文本，图片太大显示不全的解决
(1)用UIWebview加载 // 自适应尺寸大小 - (NSString *)autoWebAutoImageSize:(NSString *)html{//搜索标签文本中的<img> ...
html 页面怎么加载富文本,UILabel加载html富文本
本文主要解决html标签之外文本属性设置当APP里面有搜索的需求的时候,产品可能会要求关键字显示特殊颜色或者字体.其中一种可能性是服务器返回的数据是带有html标签的字符串,那么该怎么解决?当标签之 ...

Flutter webView加载html富文本