如何在Flutter的TextField中显示HTML文本？

Flutter原生TextField仅支持纯文本输入/显示，无法直接渲染HTML内容。要实现HTML文本的展示（或编辑），可以通过以下两种常用方案解决：

方案一：使用flutter_quill实现可编辑的HTML文本框 #

如果需要支持HTML内容的编辑和渲染，flutter_quill是成熟的富文本编辑器组件，支持HTML格式的导入与导出。

1. 添加依赖到pubspec.yaml：

dependencies:
  flutter_quill: ^latest_version # 替换为pub上的最新版本

执行flutter pub get完成依赖安装。

2. 实现示例代码：

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';

class HtmlEditableField extends StatefulWidget {
  const HtmlEditableField({super.key});

  @override
  State<HtmlEditableField> createState() => _HtmlEditableFieldState();
}

class _HtmlEditableFieldState extends State<HtmlEditableField> {
  final QuillController _quillController = QuillController.basic();

  @override
  void initState() {
    super.initState();
    // 加载HTML内容到编辑器
    const sampleHtml = '<p>这是<b>加粗</b>文本，<i>斜体</i>效果，还有<u>下划线</u></p>';
    _quillController.document = Document.fromHtml(sampleHtml);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('HTML编辑框示例')),
      body: Column(
        children: [
          // 编辑工具栏（不需要编辑可移除）
          QuillToolbar.basic(controller: _quillController),
          // 替代原生TextField的富文本区域
          Expanded(
            child: QuillEditor.basic(
              controller: _quillController,
              readOnly: false, // 设为true可转为纯显示模式
            ),
          ),
        ],
      ),
    );
  }
}

方案二：使用html包解析HTML为富文本（仅显示） #

如果只需要展示HTML文本、不需要编辑功能，可以用html包将HTML解析为TextSpan，再通过RichText组件渲染。

1. 添加依赖：

dependencies:
  html: ^latest_version

2. 实现示例代码：

import 'package:flutter/material.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart' as dom;

class HtmlDisplayWidget extends StatelessWidget {
  final String htmlContent;
  const HtmlDisplayWidget({super.key, required this.htmlContent});

  TextSpan _parseHtmlToTextSpan(String html) {
    final dom.Document document = parse(html);
    final List<TextSpan> textSpans = [];

    void traverseNode(dom.Node node) {
      if (node is dom.Text) {
        textSpans.add(TextSpan(text: node.text));
      } else if (node is dom.Element) {
        TextStyle? textStyle;
        // 处理基础HTML标签样式
        switch (node.localName) {
          case 'b':
          case 'strong':
            textStyle = const TextStyle(fontWeight: FontWeight.bold);
            break;
          case 'i':
          case 'em':
            textStyle = const TextStyle(fontStyle: FontStyle.italic);
            break;
          case 'u':
            textStyle = const TextStyle(decoration: TextDecoration.underline);
            break;
        }

        // 递归处理子节点
        for (var child in node.children) {
          traverseNode(child);
        }

        // 为最后一个文本节点应用样式
        if (textStyle != null && textSpans.isNotEmpty) {
          textSpans.last = textSpans.last.copyWith(style: textStyle);
        }
      }
    }

    traverseNode(document.body!);
    return TextSpan(children: textSpans);
  }

  @override
  Widget build(BuildContext context) {
    return RichText(
      text: _parseHtmlToTextSpan(htmlContent),
    );
  }
}

// 使用示例
// HtmlDisplayWidget(htmlContent: '<p>这是<b>加粗</b>的HTML展示文本</p>')

注意事项 #

• 需编辑HTML内容时优先选flutter_quill，它支持更多格式和交互，无需自己处理复杂的标签解析逻辑。
• 纯展示场景用html包更轻量，但上述示例仅处理了基础标签，复杂HTML（如图片、列表）需要扩展解析逻辑。

内容的提问来源于stack exchange，提问作者Hưng Mai Phạm Quốc