題記
—— 執(zhí)劍天涯官紫，從你的點滴積累開始，所及之處州藕，必精益求精束世。
在實際業(yè)務開發(fā)中，時常會有這種一段Html格式的標簽床玻，看下圖的情況 ：
在 Flutter 中毁涉，有點發(fā)愁，因為 Flutter 提供的 Text 與 RichText 還解析不了這種格式的锈死，但是你也不能使用 WebView 插件贫堰，如果使用了，你會在每一個Item中嵌入一個瀏覽器內(nèi)核待牵，再強的手機其屏，也會卡，當然肯定不能這樣做缨该，因為這樣就是錯誤的做法偎行。
小編經(jīng)過大量的嘗試與思考，終于寫出來了一個插件可以來解析了贰拿，現(xiàn)分享給大家蛤袒。
1 基本使用實現(xiàn)
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(
///內(nèi)容邊距
padding: EdgeInsets.all(8),
child: Column(
///子Widget左對齊
crossAxisAlignment: CrossAxisAlignment.start,
///內(nèi)容包裹
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就可輕松實現(xiàn)解析（如下代碼清單2-1），當然在iOS中使用UILabel也可輕松實現(xiàn)（如下代碼清單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]; // 調(diào)整行間距
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來實現(xiàn)。
//Flutter中加載原生View核心方法
//代碼清單2-3
buildAndroidView() {
return AndroidView(
//設置標識
viewType: "com.studyon./text_html",
//參數(shù)的編碼方式
creationParamsCodec: const StandardMessageCodec(),
);
}
/// 通過 UiKitView 來加載 iOS原生View
buildUIKitView() {
return UiKitView(
//標識
viewType: "com.studyon./text_html",
//參數(shù)的編碼方式
creationParamsCodec: const StandardMessageCodec(),
);
}
于是小編開發(fā)了第一波操作健蕊，開發(fā)了這樣的一個插件來調(diào)用原生 View 實現(xiàn)渲染富文本標簽【源碼在這里】,這個插件使用方式很簡單菱阵，如下所示：
HTMLTextWidet(
htmlText: "測試一下",
)
這一步操作真是所謂的騷操作，其實小編在開發(fā)前就覺得不太合適缩功，不過以小編的個性晴及，非得嘗試驗證一下，現(xiàn)結果出來了嫡锌，就是在加載時虑稼，由于應用在列表中琳钉，使用 HTMLTextWidet 會有短暫的黑屏效果，而且內(nèi)存出吃不消,如下圖所示：
[圖片上傳失敗...(image-f999c1-1600505805950)]
為什么會黑屏蛛倦，閑魚技術團隊有過論述在Flutter中嵌入Native組件的正確姿勢 以及 文章 深入了解Flutter界面開發(fā)中有詳細論述 歌懒。
所以結果是 ：不可行。
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 來使用解析的內(nèi)容且改，如下代碼清單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,
),
實踐結果：可行验烧，但是有兼容性差，效率低又跛。
當然閑魚團隊在文章 如何低成本實現(xiàn)Flutter富文本碍拆，看這一篇就夠了！ 中也有詳細論述慨蓝。
4 燒腦思考實踐三
當在Flutter中 Dart 從網(wǎng)站中提取數(shù)據(jù)時感混，html依賴庫是一個不錯的選擇，html 是一個開源的 Dart 包礼烈，主要用于從 HTML 中提取數(shù)據(jù)弧满，從中獲取節(jié)點的屬性、文本和 HTML以及各種節(jié)點的內(nèi)容济丘。Html pub倉庫
dependencies:
html: ^0.14.0+3
于是乎小編也開始嘗試谱秽，首先是使用 Html 庫解析 HTML文本塊，將解析的 Document 通過遞歸方式遍歷出來所有的 node 節(jié)點摹迷，如下代碼清單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 節(jié)點
dom.Node cloneNode = document.body.clone(true);
// 注意: 先序遍歷找到所有關鍵節(jié)點（由于是引用傳值，所以需要重新獲取一遍 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);
// 注意: 對于占據(jù)整行的圖片也作為關鍵節(jié)點處理
} 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 節(jié)點
for (var i = 0; i < node.nodes.length; ++i) {
dom.Node item = node.nodes[i];
callBack(item);
parseNodesTree(item, callBack: callBack);
}
}
然后就是將 得出的 node 節(jié)點 與 Flutter 組件映射峡碉，文本使用 TextSpan 近哟，圖片使用 Image ,然后將 樣式使用 TextStyle 映射，然后最后將解析的結果組件使用 Wrap 來包裹鲫寄，就達到了現(xiàn)在的插件 flutter_html_rich_text
綜合實現(xiàn)思路就是 使用 HTML 庫完善了【燒腦思考實踐二】中的解析吉执。
解析篇幅較長，大家有興趣可以看下 github 源碼地来。
目前小編在西瓜視頻上免費刊登 Flutter 系列教程戳玫，每日更新，歡迎關注接收提醒點擊查看提示 各種系列的教程
2020.09.12 開發(fā)筆記
