把html解析为自定义Widget,可直接展示,使用方便快捷
- 图片解析展示
- 普通图片展示
- 长图切割展示
- 图片点击 跳转相册(相册没有在解析中实现,只返回了图片地址list)
- 可定义图片间距
- 链接点击
- webview视频播放(可直接播放,也可自定义处理)
- 段落样式支持(居左 居中 居右 引用 段落间距)
- 文字样式支持
- 字体大小
- 字体颜色
- a 链接是下划线定义
- 链接字体颜色
- 行高
- 数字标签前缀
- 数字标签大小
- 点标签前缀
- 点标签大小
- 引用样式
- 引用样式颜色 宽度 margin 相对位置
- 字符横向间距
- 单词间距
- 加粗 倾斜等常见样式
同步解析
String html =
'<p>这样<span style="text-decoration: underline;">做<span style="text-decoration: underline; color: #e8451a;">的</span><strong>好处,</strong></span><span style="text-decoration: none;"><strong><span style="text-decoration: none; color: #92cf4f;">我<em>觉</em></span></strong></span><span style="text-decoration: underline;"><strong><em>得</em><em><a href="https://www.imooc.com/article/details/id/31493" title="可能是为了" target="_blank">可能是为了</a>了统一的渲染</em></strong><strong>。加入</strong>样</span>式,会</p>';
HtmlTextView(html)
异步解析
HtmlParserToWidgetList(
imagePadding:
EdgeInsets.only(top: 2.0, left: 12.0, right: 12.0, bottom: 0.0),
videoPadding:
EdgeInsets.only(top: 4.0, left: 12.0, right: 12.0, bottom: 2.0),
htmlTextStyle: HtmlTextStyle(
height: 1.6,
fontSize: valueOfPt(17),
padding:
EdgeInsets.only(top: 6.0, left: 12.0, right: 12.0, bottom: 8.0),
digitalFontWeight: DigitalFontWeight.strong,
digitalPrefix: ' ',
pointPrefix: ' ',
defaultTextColor: isNightStyle ? Color(0xff898989) : Color(0xff333333),
letterSpacing: 1.0,
),
)
/// this.data 是需要解析的html
.asyncParseHtmlToWidgetList(this.data,
onTapCallback: this.onTapCallback, imageList: imageList, id: id)
.then((nodes) {
/// nodes 既为解析出的WidgetList
});
效果图如下:
![]() |
![]() |
![]() |
![]() |
---|---|---|---|
![]() |
觉得还可以的话,来个Star、Fork支持一波!有问题欢迎提Issue。