欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

Flutter中富文件标签的解决方案

程序员文章站 2022-08-25 22:16:50
在 Flutter 中,有点发愁,因为 Flutter 提供的 Text 与 RichText 还解析不了这种格式的,但是你也不能使用 WebView 插件,如果使用了,你会在每一个Item中嵌入一个浏览器内核,再强的手机,也会卡,当然肯定不能这样做,因为这样就是错误的做法。小编经过大量的尝试与思考,终于写出来了一个插件可以来解析了,现分享给大家...

题记
—— 执剑天涯,从你的点滴积累开始,所及之处,必精益求精。
【x1】点击查看提示

【x2】各种系列的教程

一个程序员的修炼日记


在实际业务开发中,时常会有这种一段Html格式的标签,看下图的情况 :

Flutter中富文件标签的解决方案
在 Flutter 中,有点发愁,因为 Flutter 提供的 Text 与 RichText 还解析不了这种格式的,但是你也不能使用 WebView 插件,如果使用了,你会在每一个Item中嵌入一个浏览器内核,再强的手机,也会卡,当然肯定不能这样做,因为这样就是错误的做法。

小编经过大量的尝试与思考,终于写出来了一个插件可以来解析了,现分享给大家。

1 基本使用实现

1.2 添加依赖

小编依旧,来个pub方式:【不用说 快捷入口在这】【当然也有github】 【夸张点还有 视频支持】

dependencies:
  flutter_html_rich_text: ^1.0.0

Flutter中富文件标签的解决方案

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中富文件标签的解决方案
为什么会黑屏,闲鱼技术团队有过论述在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 开发笔记

本文地址:https://blog.csdn.net/zl18603543572/article/details/108677070