Flutter非WebView解析HTML标签及SVG显示问题求助

方案1：增强flutter_widget_from_html的SVG处理能力 #

你遇到的SVG显示问题大概率是默认配置未启用完整的SVG渲染支持，可通过扩展包配合解决：

• 添加依赖：在pubspec.yaml中加入flutter_widget_from_html_core（核心解析包）和flutter_svg（SVG渲染组件）。
• 自定义WidgetFactory：重写图片标签的处理逻辑，检测到SVG时用SvgPicture替代默认组件。

代码示例：

import 'package:flutter_widget_from_html_core/flutter_widget_from_html_core.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:html/dom.dart' as dom;

class CustomWidgetFactory extends WidgetFactory {
  @override
  Widget? buildImageWidget(BuildMetadata meta, String url, {dom.ImageElement? img}) {
    // 判断是否为SVG资源
    if (url.endsWith('.svg') || (img?.getAttribute('src')?.endsWith('.svg') ?? false)) {
      return SvgPicture.network(
        url,
        fit: BoxFit.contain,
        placeholderBuilder: (context) => const CircularProgressIndicator(),
      );
    }
    // 其他图片类型沿用默认处理逻辑
    return super.buildImageWidget(meta, url, img: img);
  }
}

// 使用自定义工厂类
HtmlWidget(
  yourHtmlContentString,
  factoryBuilder: () => CustomWidgetFactory(),
)

方案2：手动解析HTML DOM并映射为Flutter组件 #

如果扩展flutter_widget_from_html仍无法满足需求，可完全自定义解析流程，灵活性更高：

1. 用html包将HTML字符串解析为DOM树。
2. 遍历DOM节点，将不同标签映射为对应Flutter组件：
   • 文本节点直接用Text组件。
   • 段落、容器标签用Column/Padding等布局组件包裹。
   • img标签判断为SVG时，用SvgPicture加载（支持网络、本地、base64内嵌资源）。

代码示例（核心逻辑）：

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:convert';

Widget buildCustomHtml(String html) {
  final document = parse(html);
  return _renderNode(document.body!);
}

Widget _renderNode(dom.Node node) {
  if (node is dom.Text) {
    return Text(node.text.trim());
  }
  if (node is dom.Element) {
    final children = node.children.map(_renderNode).toList();
    switch (node.localName) {
      case 'img':
        final src = node.getAttribute('src');
        if (src == null) return const SizedBox.shrink();
        
        // 处理base64内嵌SVG
        if (src.startsWith('data:image/svg+xml;base64,')) {
          final svgBytes = base64Decode(src.split(',').last);
          return SvgPicture.memory(
            svgBytes,
            fit: BoxFit.contain,
          );
        }
        
        // 处理网络SVG
        if (src.endsWith('.svg')) {
          return SvgPicture.network(
            src,
            fit: BoxFit.contain,
          );
        }
        
        // 非SVG图片用默认Image组件
        return Image.network(src);
      case 'p':
        return Padding(
          padding: const EdgeInsets.symmetric(vertical: 8.0),
          child: Column(children: children),
        );
      case 'div':
        return Column(children: children);
      // 按需扩展更多标签支持（如span、h1-h6等）
      default:
        return Column(children: children);
    }
  }
  return const SizedBox.shrink();
}

关键注意点 #

• 对于内嵌base64格式的SVG，需先提取编码内容，解码为Uint8List后用SvgPicture.memory加载。
• 复杂SVG若包含特殊CSS样式，flutter_svg仅支持部分标准SVG属性，必要时需预转换SVG为兼容格式（如去除非标准样式）。

内容的提问来源于stack exchange，提问作者Furkan ATAMAN