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

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

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

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

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

1 基本使用实现

1.2 添加依赖

小编依旧，来个pub方式：

dependencies:  flutter_html_rich_text: ^1.0.0

github:

https://github.com/zhaolongs

1.3 加载解析 HTML 片段标签

核心方法如下：

///htmlText 就是你的 HTML 片段了 HtmlRichText(  htmlText: txt, ),

如下代码清单 1-3-1 就是上述图中的效果：

/// 代码清单 1-3-1class 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 实现渲染富文本标签，这个插件使用方式很简单，如下所示：

https://github.com/zhaolongs/flutter_html_text_plugin

HTMLTextWidet(  htmlText: "测试一下", )

这一步操作真是所谓的骚操作，其实小编在开发前就觉得不太合适，不过以小编的个性，非得尝试验证一下，现结果出来了，就是在加载时，由于应用在列表中，使用 HTMLTextWidet 会有短暂的黑屏效果，而且内存出吃不消,如下图所示：

为什么会黑屏，闲鱼技术团队有过论述

述在Flutter中嵌入Native组件的正确姿势以及文章深入了解Flutter界面开发中有详细论述。

所以结果是：不可行。

3 烧脑思考实践二

用 Java 的思想来解析 String 的方式来处理 HTML 字符串，处理成小片段，然后使用Text结合流式布局 Wrap 来组合。

4 烧脑思考实践三

当在Flutter中 Dart 从网站中提取数据时，html依赖库是一个不错的选择，html 是一个开源的 Dart 包，主要用于从 HTML 中提取数据，从中获取节点的属性、文本和 HTML以及各种节点的内容。

理详细点的请查看原文。

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。