Flutter中富文件標籤的解決方案

題記
—— 執劍天涯，從你的點滴積累開始，所及之處，必精益求精。
【x1】點擊查看提示javascript

一個程序員的修煉日記 </div> <hr/> 在實際業務開發中，時常會有這種一段Html格式的標籤，看下圖的狀況： <img src="https://img-blog.csdnimg.cn/20200919153356921.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center" alt="在這裏插入圖片描述"/> 在 Flutter 中，有點發愁，由於 Flutter 提供的 Text 與 RichText 還解析不了這種格式的，可是你也不能使用 WebView 插件，若是使用了，你會在每個Item中嵌入一個瀏覽器內核，再強的手機，也會卡，固然確定不能這樣作，由於這樣就是錯誤的作法。 小編通過大量的嘗試與思考，終於寫出來了一個插件能夠來解析了，現分享給你們。 <h4><a id="1__18"/>1 基本使用實現</h4> <h5><a id="12__20"/>1.2 添加依賴</h5> 小編依舊，來個pub方式：<a href="https://pub.flutter-io.cn/packages/flutter_html_rich_text">【不用說快捷入口在這】</a><a href="https://github.com/zhaolongs">【固然也有github】</a> <a href="https://www.toutiao.com/c/user/token/MS4wLjABAAAAYMrKikomuQJ4d-cPaeBqtAK2cQY697Pv9xIyyDhtwIM/">【誇張點還有視頻支持】</a> <pre><code class="prism language-javascript">dependencies: flutter_html_rich_text: ^1.0.0 </code></pre> <img src="https://img-blog.csdnimg.cn/2020091915403745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psMTg2MDM1NDM1NzI=,size_16,color_FFFFFF,t_70#pic_center" alt="在這裏插入圖片描述"/> <h5><a id="13__HTML__30"/>1.3 加載解析 HTML 片斷標籤</h5> 核心方法以下： <pre><code class="prism language-javascript">///htmlText 就是你的 HTML 片斷了 HtmlRichText( htmlText: txt, ), </code></pre> 以下代碼清單 1-3-1 就是上述圖中的效果： <pre><code class="prism language-javascript">/// 代碼清單 1-3-1 class TestHtmlPage extends StatefulWidget { @override _TestPageState createState() => _TestPageState(); } class _TestPageState extends State<TestHtmlPage> { String txt = "長途輪 <h4>高速驅動</h4>" " 3條立減購胎抽獎" "長途高速驅動輪 3條立減購胎抽獎"; @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, ), ) ], ), ); } } </code></pre> <hr/> 如下是解析思考燒腦的實踐 <hr/> <h4><a id="_107"/></h4> <h4><a id="2__109"/>2 燒腦思考實踐一</h4> Flutter 應用程序被 Android iOS平臺加載，在原生 Android 中，使用TextView就可輕鬆實現解析（以下代碼清單2-1），固然在iOS中使用UILabel也可輕鬆實現（以下代碼清單2-2）。 <pre><code class="prism language-java">// Android 原生 TextView加載Html的核心方法 //代碼清單2-1 // MxgsaTagHandler 定義的一個 TagHandler 用來處理點擊事件 lTextView.setText(Html.fromHtml(myContent, null, new MxgsaTagHandler(context))); lTextView.setClickable(true); lTextView.setMovementMethod(LinkMovementMethod.getInstance()); </code></pre> <pre><code class="prism language-objectivec">// iOS 原生 UILabel加載Html的核心方法 //代碼清單2-2 //返回的HTML文本如 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]; </code></pre> 而後對於 Flutter 來說是能夠順利的加載原生 View的【<a href="https://blog.csdn.net/zl18603543572/article/details/95983215">在這有講述</a>】，以下代碼清單 2-3所示就是在Flutter中經過 AndroidView 與 UiKitView來實現。 <pre><code class="prism language-javascript"> //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(), ); } </code></pre> 因而小編開發了第一波操做，開發了這樣的一個插件來調用原生 View 實現渲染富文本標籤<a href="https://github.com/zhaolongs/flutter_html_text_plugin">【源碼在這裏】</a>,這個插件使用方式很簡單，以下所示： <pre><code class="prism language-javascript">HTMLTextWidet( htmlText: "測試一下", ) </code></pre> 這一步操做真是所謂的騷操做，其實小編在開發前就以爲不太合適，不過以小編的個性，非得嘗試驗證一下，現結果出來了，就是在加載時，因爲應用在列表中，使用 HTMLTextWidet 會有短暫的黑屏效果，並且內存出吃不消,以下圖所示： <img src="https://img-blog.csdnimg.cn/20200919161053269.gif#pic_center" alt="在這裏插入圖片描述"/> 爲何會黑屏，閒魚技術團隊有過論述<a href="https://juejin.im/post/6844903714180841485">在Flutter中嵌入Native組件的正確姿式</a> 以及文章 <a href="https://zhuanlan.zhihu.com/p/36577285">深刻了解Flutter界面開發中有詳細論述</a> 。 因此結果是：不可行。 <hr/> <h4><a id="3__192"/>3 燒腦思考實踐二</h4> 用 Java 的思想來解析 String 的方式來處理 HTML 字符串，處理成小片斷，而後使用Text結合流式佈局 Wrap 來組合，核心代碼以下清單 3-1 所示爲解析： <pre><code class="prism language-javascript"> /* 解析標籤 */ 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; } </code></pre> 而後 TagColorModel 的定義以下代碼清單 3-2所示： <pre><code class="prism language-javascript">///代碼清單 3-2 class TagColorModel { ///背景 Color backGroundColor; ///文本顏色 Color textColor; ///文本 String text; TagColorModel( {this.text = "", this.backGroundColor = Colors.transparent, this.textColor = Colors.white}); } </code></pre> 而後就是使用 Wrap 來使用解析的內容，以下代碼清單3-3所示： <pre><code class="prism language-javascript">///代碼清單 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, ), </code></pre> 實踐結果：可行，可是有兼容性差，效率低。 固然閒魚團隊在文章 <a href="https://www.jianshu.com/p/4835ad8107d6">如何低成本實現Flutter富文本，看這一篇就夠了！</a> 中也有詳細論述。 <h4><a id="4__301"/>4 燒腦思考實踐三</h4> 當在Flutter中 Dart 從網站中提取數據時，html依賴庫是一個不錯的選擇，html 是一個開源的 Dart 包，主要用於從 HTML 中提取數據，從中獲取節點的屬性、文本和 HTML以及各類節點的內容。Html <a href="https://pub.flutter-io.cn/packages/html/install">pub倉庫</a> <pre><code class="prism language-javascript">dependencies: html: ^0.14.0+3 </code></pre> 因而乎小編也開始嘗試，首先是使用 Html 庫解析 HTML文本塊，將解析的 Document 經過遞歸方式遍歷出來全部的 node 節點，以下代碼清單4-1所示： <pre><code class="prism language-javascript">代碼清單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(' ', '\n'); originHtmlString = originHtmlString.replaceAll(' ', '\n'); originHtmlString = originHtmlString.replaceAll(' ', '\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); } }); } </code></pre> <pre><code class="prism language-javascript">///遞歸遍歷 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); } } </code></pre> 而後就是將得出的 node 節點與 Flutter 組件映射，文本使用 TextSpan ，圖片使用 Image ,而後將樣式使用 TextStyle 映射，而後最後將解析的結果組件使用 Wrap 來包裹，就達到了如今的插件 <a href="https://pub.flutter-io.cn/packages/flutter_html_rich_text">flutter_html_rich_text</a> 綜合實現思路就是使用 HTML 庫完善了【燒腦思考實踐二】中的解析。 解析篇幅較長，你們有興趣能夠看下 github 源碼。 <hr/> 目前小編在西瓜視頻上免費刊登 Flutter 系列教程，每日更新，歡迎關注接收提醒<a href="https://www.ixigua.com/6872871296074514947">點擊查看提示</a> <a href="https://www.ixigua.com/home/3662978423/pseries/?preActiveKey=home">各類系列的教程</a> 2020.09.12 開發筆記 <ul><li><a href="https://blog.csdn.net/zl18603543572/article/details/108542749">iOS中加載Flutter中的圖片</a></li><li><a href="https://www.ixigua.com/6873625398358475272?id=6873233700075766286&logTag=V7knHiGBc_rkicdDQ91oJ">Flutter組件精講【01】 MateriaApp使用概述</a></li><li><a href="https://www.ixigua.com/6873625398358475272?id=6873235818551443971&logTag=fkCe_gTywndHcFSgBq1DY">Flutter組件精講【02】MaterialApp組件的基本使用</a></li><li><a href="https://www.ixigua.com/6873625398358475272?id=6873237305050530312&logTag=YqB9GQOPvB-Za9tNAv3ov">Flutter組件精講【03】 MateriaApp組件路由routes配製</a></li><li><a href="https://www.ixigua.com/6873625398358475272?id=6873240371485213195&logTag=NcL3TWBQ0JZRvo_NCAzPJ">Flutter組件精講【04】 MateriaApp配置默認啓動頁面</a></li><li><a href="https://www.ixigua.com/6873625398358475272">Flutter組件精講【05】 MateriaApp之頁面的跳轉</a></li><li><a href="https://www.ixigua.com/6873625398358475272">Flutter組件精講【06】MaterialApp 組件配置 404 頁面-01</a></li><li><a href="https://www.ixigua.com/6873625398358475272">Flutter組件精講【07】MaterialApp 組件配置 404 頁面-02</a></li></ul>

本文同步分享在博客「早起的年輕人」（CSDN）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。java