关于Flutter中Quill Delta格式转HTML转换器及已保存文档展示方案的技术问询

当然有啦！在Flutter生态里，已经有现成的工具可以帮你把Quill Delta格式转换成HTML，同时也有几种靠谱的方式来展示你的文档。让我一步步给你拆解：

一、Quill Delta转HTML的转换器 #

目前最常用的是quill_html_converter这个包，它专门处理Delta到HTML的转换，支持Quill编辑器的绝大多数格式（标题、列表、粗体、斜体、链接、图片等都不在话下）。

使用步骤： #

1. 先在pubspec.yaml中添加依赖：

   dependencies:
     quill_html_converter: ^最新版本号 # 建议去pub.dev查最新版本
   

2. 代码中完成转换：

   import 'package:quill_html_converter/quill_html_converter.dart';
   import 'dart:convert';
   
   // 假设你从本地存储/后端拿到的Delta JSON字符串
   String savedDeltaJson = '{"ops":[{"insert":"Hello "},{"insert":"Flutter!","attributes":{"bold":true}}]}';
   // 解析成Delta对象
   Delta delta = Delta.fromJson(jsonDecode(savedDeltaJson));
   
   // 转换为HTML字符串
   String htmlContent = QuillHtmlConverter.convertDeltaToHtml(delta);
   // 输出结果：<p>Hello <strong>Flutter!</strong></p>
   

如果你本身就是用flutter_quill编辑器生成的Delta，直接把编辑器的QuillController.document.toDelta()传进去就行，完全兼容。

二、Flutter中展示文档的两种核心方式 #

方式1：WebView渲染HTML（适合复杂HTML场景） #

如果转换后的HTML包含特殊样式或网页特性，用WebView展示是最稳妥的选择，推荐用webview_flutter包：

import 'package:webview_flutter/webview_flutter.dart';

class HtmlDocumentViewer extends StatelessWidget {
  final String htmlContent;

  const HtmlDocumentViewer({super.key, required this.htmlContent});

  @override
  Widget build(BuildContext context) {
    return WebViewWidget(
      controller: WebViewController()
        ..loadHtmlString(htmlContent),
    );
  }
}

• 优点：支持所有HTML特性，还原度高；
• 缺点：依赖WebView，性能略逊于原生组件，打包体积会稍有增加。

方式2：用flutter_quill直接渲染Delta（原生更流畅） #

其实你完全可以跳过转HTML的步骤，直接用flutter_quill的原生组件渲染Delta内容，这也是最推荐的方案——毕竟是同生态的工具，还原度和性能都更优：

import 'package:flutter_quill/flutter_quill.dart';

class DeltaDocumentViewer extends StatelessWidget {
  final Delta delta;

  const DeltaDocumentViewer({super.key, required this.delta});

  @override
  Widget build(BuildContext context) {
    final document = Document.fromDelta(delta);
    // 用只读模式的QuillEditor渲染
    return QuillEditor(
      controller: QuillController(
        document: document,
        selection: const TextSelection.collapsed(offset: 0),
      ),
      readOnly: true,
      focusNode: FocusNode(),
      scrollController: ScrollController(),
      padding: EdgeInsets.zero,
    );
    // 新版本flutter_quill还提供了更简洁的QuillViewer：
    // return QuillViewer(document: document);
  }
}

• 优点：原生Flutter渲染，性能好，样式和编辑器完全统一；
• 缺点：无法支持HTML特有的非Quill格式，但对于你保存的Quill文档来说，完全够用。

总结建议 #

如果你的需求只是展示用Quill生成的文档，优先选择方式2直接渲染Delta，步骤更简单、体验更好；如果必须转换成HTML（比如要和Web端共享格式），再用转换器+WebView的组合。

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