Flutter如何解析HTML富文本

在Flutter中解析HTML富文本时，遇到格式错乱或图片无法显示的问题，有没有稳定高效的解决方案？除了官方推荐的flutter_html插件，还有哪些第三方库值得尝试？具体实现时需要注意哪些细节？

2 回复

Flutter解析HTML富文本可使用flutter_html库。安装后在代码中引入，用Html组件包裹HTML字符串即可自动解析并渲染。支持常用标签和样式，简单高效。

更多关于Flutter如何解析HTML富文本的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中解析HTML富文本，推荐使用flutter_html库，它支持常见的HTML标签和样式。

安装依赖

dependencies:
  flutter_html: ^3.0.0

基本用法

import 'package:flutter_html/flutter_html.dart';

Html(
  data: """
    <h1>标题</h1>
    <p>这是一段<strong>加粗</strong>文本</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
    <a href="https://example.com">链接</a>
  """,
)

高级配置

Html(
  data: htmlContent,
  style: {
    "h1": Style(
      fontSize: FontSize(24),
      fontWeight: FontWeight.bold,
    ),
    "p": Style(
      lineHeight: LineHeight(1.5),
    ),
  },
  onLinkTap: (url, context, attributes, element) {
    // 处理链接点击
    print("点击链接: $url");
  },
  customRender: {
    "custom-tag": (context, child, attributes, element) {
      // 自定义标签渲染
      return Text("自定义组件");
    },
  },
)

替代方案

如果需要更强大的功能，可以考虑：

  • webview_flutter：嵌入WebView显示复杂HTML
  • html包：纯解析，不包含渲染

flutter_html是目前最轻量且功能完善的解决方案，适合大多数HTML富文本显示需求。

回到顶部