Flutter中富文件标签的解决方案
程序员文章站
2022-04-14 08:12:07
在 Flutter 中，有点发愁，因为 Flutter 提供的 Text 与 RichText 还解析不了这种格式的，但是你也不能使用 WebView 插件，如果使用了，你会在每一个Item中嵌入一个浏览器内核，再强的手机，也会卡，当然肯定不能这样做，因为这样就是错误的做法。小编经过大量的尝试与思考，终于写出来了一个插件可以来解析了，现分享给大家...
题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。
【x1】点击查看提示
一个程序员的修炼日记
在实际业务开发中，时常会有这种一段Html格式的标签，看下图的情况 ：
在 Flutter 中，有点发愁，因为 Flutter 提供的 Text 与 RichText 还解析不了这种格式的，但是你也不能使用 WebView 插件，如果使用了，你会在每一个Item中嵌入一个浏览器内核，再强的手机，也会卡，当然肯定不能这样做，因为这样就是错误的做法。
小编经过大量的尝试与思考，终于写出来了一个插件可以来解析了，现分享给大家。
1 基本使用实现
1.2 添加依赖
小编依旧，来个pub方式：【不用说 快捷入口在这】【当然也有github】 【夸张点还有 视频支持】
dependencies:
flutter_html_rich_text: ^1.0.0
1.3 加载解析 HTML 片段标签
核心方法如下：
///htmlText 就是你的 HTML 片段了
HtmlRichText(
htmlText: txt,
),
如下代码清单 1-3-1 就是上述图中的效果：
/// 代码清单 1-3-1
class TestHtmlPage extends StatefulWidget {
@override
_TestPageState createState() => _TestPageState();
}
class _TestPageState extends State<TestHtmlPage> {
String txt =
"<p>长途轮 <h4>高速驱动</h4><span style='background-color:#ff3333'>"
"<span style='color:#ffffff;padding:10px'> 3条立减 购胎抽奖</span></span></p>"
"<p>长途高速驱动轮<span ><span style='color:#cc00ff;'> 3条立减 购胎抽奖</span></span></p>";
@override
Widget build(BuildContext context) {
return Scaffold(
///一个标题
appBar: AppBar(title: Text('A页面'),),
body: Center(
///一个列表
child: ListView.builder(
itemBuilder: (BuildContext context, int postiont) {
return buildItemWidget(postiont);
},
itemCount: 100,
),
),
);
}
///ListView的条目
Widget buildItemWidget(int postiont) {
return Container(
///内容边距
padding: EdgeInsets.all(8),
child: Column(
///子Widget左对齐
crossAxisAlignment: CrossAxisAlignment.start,
///内容包裹
mainAxisSize: MainAxisSize.min,
children: [
Text(
"测试标题 $postiont",
style: TextStyle(fontWeight: FontWeight.w500),
),
///html富文本标签
Container(
margin: EdgeInsets.only(top: 8),
child: HtmlRichText(
htmlText: txt,
),
)
],
),
);
}
}
以下是解析思考 烧脑的实践
2 烧脑思考实践一
Flutter 应用程序被 Android iOS平台加载，在原生 Android 中，使用TextView就可轻松实现解析（如下代码清单2-1），当然在iOS中使用UILabel也可轻松实现（如下代码清单2-2）。
// Android 原生 TextView加载Html的核心方法
//代码清单2-1
// MxgsaTagHandler 定义的一个 TagHandler 用来处理点击事件
lTextView.setText(Html.fromHtml(myContent, null, new MxgsaTagHandler(context)));
lTextView.setClickable(true);
lTextView.setMovementMethod(LinkMovementMethod.getInstance());
// iOS 原生 UILabel加载Html的核心方法
//代码清单2-2
//返回的HTML文本 如 <font color = 'red'></font>
NSString *str = @"htmlText";
NSString *HTMLString = [NSString stringWithFormat:@"<html><body>%@</body></html>", str ];
NSDictionary *options = @{NSDocumentTypeDocumentAttribute : NSHTMLTextDocumentType,
NSCharacterEncodingDocumentAttribute : @(NSUTF8StringEncoding)
};
NSData *data = [HTMLString dataUsingEncoding:NSUTF8StringEncoding];
NSMutableAttributedString * attributedString = [[NSMutableAttributedString alloc] initWithData:data options:options documentAttributes:nil error:nil];
NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; // 调整行间距
paragraphStyle.lineSpacing = 8.0;
paragraphStyle.alignment = NSTextAlignmentJustified;
[attributedString addAttribute:NSParagraphStyleAttributeName value:paragraphStyle range:NSMakeRange(0, attributedString.length)];
[attributedString addAttribute:NSFontAttributeName value:[UIFont systemFontOfSize:15] range:NSMakeRange(0, attributedString.length)];
_uiLabel.backgroundColor = [UIColor cyanColor];
_uiLabel.numberOfLines = 0;
_uiLabel.attributedText = attributedString;
[_uiLabel sizeToFit];
然后对于 Flutter 来讲是可以顺利的加载原生 View的 【在这有讲述】，如下代码清单 2-3所示就是在Flutter中通过 AndroidView 与 UiKitView来实现。
//Flutter中加载原生View核心方法
//代码清单2-3
buildAndroidView() {
return AndroidView(
//设置标识
viewType: "com.studyon./text_html",
//参数的编码方式
creationParamsCodec: const StandardMessageCodec(),
);
}
/// 通过 UiKitView 来加载 iOS原生View
buildUIKitView() {
return UiKitView(
//标识
viewType: "com.studyon./text_html",
//参数的编码方式
creationParamsCodec: const StandardMessageCodec(),
);
}
于是小编开发了第一波操作，开发了这样的一个插件来调用原生 View 实现渲染富文本标签【源码在这里】,这个插件使用方式很简单，如下所示：
HTMLTextWidet(
htmlText: "测试一下",
)
这一步操作真是所谓的骚操作，其实小编在开发前就觉得不太合适，不过以小编的个性，非得尝试验证一下，现结果出来了，就是在加载时，由于应用在列表中，使用 HTMLTextWidet 会有短暂的黑屏效果，而且内存出吃不消,如下图所示：
为什么会黑屏，闲鱼技术团队有过论述在Flutter中嵌入Native组件的正确姿势 以及 文章 深入了解Flutter界面开发中有详细论述 。
所以结果是 ：不可行。
3 烧脑思考实践二
用 Java 的思想来解析 String 的方式来处理 HTML 字符串，处理成小片段，然后使用Text结合 流式布局 Wrap 来组合，核心代码如下清单 3-1 所示为解析：
/*
解析标签
*/
List<TagColorModel> findBackGroundColor(String htmlStr) {
List<TagColorModel> tagColorModelList = [];
List<String> colorSpiltList = [];
String driverAdvertisement = htmlStr;
if (driverAdvertisement != null) {
colorSpiltList = driverAdvertisement.split("background-color");
for (var i = 0; i < colorSpiltList.length; i++) {
TagColorModel itemColorModel = TagColorModel();
String colorsStr = colorSpiltList[i];
List<String> itemSpiltList = colorsStr.split(":#");
for (var j = 0; j < itemSpiltList.length; ++j) {
String item = itemSpiltList[j];
String itemColor = "";
String itemText = "";
try {
if (item.length >= 6) {
itemColor = item.toString().substring(0, 6);
if (itemColor.trim().toUpperCase() == "FFFFFF") {
itemColorModel.backGroundColor = ColorUtils.getRandomColor();
} else {
itemColorModel.backGroundColor = new Color(
int.parse(itemColor.trim(), radix: 16) + 0xFF000000);
}
int startIndex = item.indexOf("\">");
int endIndex = item.indexOf("</");
if (startIndex != -1 && endIndex >= startIndex) {
LogUtil.e("startIndex $startIndex endIndex $endIndex ");
itemText = item.substring(startIndex + 2, endIndex);
LogUtil.e("itemColor $itemColor itemText $itemText ");
itemColorModel.text = itemText;
tagColorModelList.add(itemColorModel);
}
}
} catch (e) {
///解析异常的 不必处理
}
}
}
}
LogUtil.e("${tagColorModelList.length} \n\n ");
return tagColorModelList;
}
然后 TagColorModel 的定义如下代码清单 3-2所示：
///代码清单 3-2
class TagColorModel {
///背景
Color backGroundColor;
///文本颜色
Color textColor;
///文本
String text;
TagColorModel(
{this.text = "",
this.backGroundColor = Colors.transparent,
this.textColor = Colors.white});
}
然后就是使用 Wrap 来使用解析的内容，如下代码清单3-3所示：
///代码清单 3-3
///获取背景颜色
List<TagColorModel> colorList = findBackGroundColor(htmlStr);
List<Widget> tagList = [];
for (var i = 0; i < colorList.length; ++i) {
TagColorModel model = colorList[i];
tagList.add(Container(
margin: EdgeInsets.only(right: 2, left: 4, top: 4),
padding: EdgeInsets.only(left: 6, right: 6),
decoration: BoxDecoration(
color: model.backGroundColor,
borderRadius: BorderRadius.all(Radius.circular(2)),
),
child: Text(
"${model.text}",
style: TextStyle(fontSize: 12, color: model.textColor),
),
));
}
///然后再使用 Wrap 包裹
Wrap(
alignment: WrapAlignment.spaceBetween,
children: tagList,
),
实践结果：可行，但是有兼容性差，效率低。
当然闲鱼团队在文章 如何低成本实现Flutter富文本，看这一篇就够了！ 中也有详细论述。
4 烧脑思考实践三
当在Flutter中 Dart 从网站中提取数据时，html依赖库是一个不错的选择，html 是一个开源的 Dart 包，主要用于从 HTML 中提取数据，从中获取节点的属性、文本和 HTML以及各种节点的内容。Html pub仓库
dependencies:
html: ^0.14.0+3
于是乎小编也开始尝试，首先是使用 Html 库解析 HTML文本块，将解析的 Document 通过递归方式遍历出来所有的 node 节点，如下代码清单4-1所示：
代码清单4-1
import 'package:html/parser.dart' as parser;
import 'package:html/dom.dart' as dom;
List<Widget> parse(String originHtmlString) {
// 空格替换 去除所有 br 标签用 \n 代替，
originHtmlString = originHtmlString.replaceAll('<br/>', '\n');
originHtmlString = originHtmlString.replaceAll('<br>', '\n');
originHtmlString = originHtmlString.replaceAll('<br />', '\n');
///html 依赖库解析
dom.Document document = parser.parse(originHtmlString);
///获取 DOM 中的 node 节点
dom.Node cloneNode = document.body.clone(true);
// 注意: 先序遍历找到所有关键节点（由于是引用传值，所以需要重新获取一遍 hashCode）
List<dom.Node> keyNodeList = new List<dom.Node>();
int nodeIndex = 0;
///递归遍历
parseNodesTree(cloneNode, callBack: (dom.Node childNode) {
if (childNode is dom.Element &&
truncateTagList.indexOf(childNode.localName) != -1) {
print('TEST: truncate tag nodeIndex = ${nodeIndex++}');
keyNodeList.add(childNode);
// 注意: 对于占据整行的图片也作为关键节点处理
} else if (childNode is dom.Element &&
childNode.localName == 'img' &&
checkImageNeedNewLine(childNode)) {
print('TEST: one line image nodeIndex = ${nodeIndex++}');
keyNodeList.add(childNode);
}
});
}
///递归遍历
void parseNodesTree(dom.Node node,
{NodeTreeCallBack callBack = printNodeName}) {
///遍历 Node 节点
for (var i = 0; i < node.nodes.length; ++i) {
dom.Node item = node.nodes[i];
callBack(item);
parseNodesTree(item, callBack: callBack);
}
}
然后就是将 得出的 node 节点 与 Flutter 组件映射，文本使用 TextSpan ，图片使用 Image ,然后将 样式使用 TextStyle 映射，然后最后将解析的结果组件使用 Wrap 来包裹，就达到了现在的插件 flutter_html_rich_text
综合实现思路就是 使用 HTML 库完善了【烧脑思考实践二】中的解析。
解析篇幅较长，大家有兴趣可以看下 github 源码。
目前小编在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒点击查看提示 各种系列的教程
2020.09.12 开发笔记
- iOS中加载Flutter中的图片
- Flutter组件精讲【01】 MateriaApp使用概述
- Flutter组件精讲【02】MaterialApp组件的基本使用
- Flutter组件精讲【03】 MateriaApp组件路由routes配制
- Flutter组件精讲【04】 MateriaApp配置默认启动页面
- Flutter组件精讲【05】 MateriaApp之页面的跳转
- Flutter组件精讲【06】MaterialApp 组件配置 404 页面-01
- Flutter组件精讲【07】MaterialApp 组件配置 404 页面-02
本文地址：https://blog.csdn.net/zl18603543572/article/details/108677070
下一篇： 电影同声传译软件诞生！ 无需苦等字幕
推荐阅读
-
mysql遇到load data导入文件数据出现1290错误的解决方案
-
Linux中文件/文件夹无法删除的解决方案
-
Flutter中如何加载并预览本地的html文件的方法
-
ASP 包含文件中的路径问题和使用单一数据库连接文件的解决方案
-
Flutter中http请求抓包的完美解决方案
-
强悍的Python读取大文件的解决方案
-
IE中iframe标签显示在DIV之上的问题解决方案
-
解析thinkphp中的导入文件标签
-
清理SQL Server 2008日志文件Cannot shrink log file 2 的解决方案
-
桌面远程连接阿里云服务器（windows）后丧失了双向文件复制粘贴功能的解决方案（第一条博客！）