如何加快Flutter中Quill HTML Editor的加载速度？

针对你遇到的编辑器加载延迟问题，可以试试以下几种优化手段，让用户完全无感知：

• 预初始化控制器与编辑器资源
  不要等到进入页面时才创建QuillController，可以在父页面或者全局提前完成控制器的创建和文本赋值，比如在应用启动阶段、跳转前的页面就初始化好。这样进入编辑器页面时，控制器已准备就绪，避免初始化环节的耗时。

• 替换加载占位符为无感知样式
  你当前loadingBuilder返回的红色进度指示器会让用户明显感知到加载延迟。可以改成和编辑器最终状态一致的占位容器，比如：

  loadingBuilder: (context) {
    return Container(
      height: 500,
      color: _backgroundColor,
      padding: const EdgeInsets.only(left: 10, top: 10),
      child: Text(
        '请输入内容', // 和你的hintText保持一致
        style: _hintTextStyle,
        textAlign: TextAlign.start,
      ),
    );
  },
  

  加载过程中用户看到的是和编辑器初始状态几乎一致的界面，加载完成后无缝切换，完全感知不到延迟。

• 提前设置编辑器文本
  你现在在onEditorCreated里调用setHtmlText，会在编辑器创建完成后额外加载文本，增加耗时。可以直接在初始化QuillController时传入初始文本：

  // 提前初始化控制器时赋值
  final controller = QuillController(
    document: Document.fromHtml(widget.controller?.text ?? ''),
    selection: const TextSelection.collapsed(offset: 0),
  );
  

  编辑器创建好后直接渲染已有文本，省去额外的文本加载步骤。

• 保持编辑器状态避免重复重建
  如果这个页面是频繁切换的场景（比如TabBar页面），可以用AutomaticKeepAliveClientMixin保存编辑器状态，避免每次切换都销毁重建：

  class EditorPage extends StatefulWidget {
    // ...
  }
  
  class _EditorPageState extends State<EditorPage> with AutomaticKeepAliveClientMixin {
    @override
    bool get wantKeepAlive => true;
  
    @override
    Widget build(BuildContext context) {
      super.build(context); // 必须调用
      return Scaffold(
        body: QuillHtmlEditor(
          // 你的编辑器配置
        ),
      );
    }
  }
  

  第一次加载后，后续进入页面直接复用已创建的编辑器，完全没有加载延迟。

• 禁用不必要的功能配置
  确保autoFocus、ensureVisible保持为false（你已设置），如果不需要编辑器的某些高级特性（比如自定义格式、图片上传等），关闭相关配置，减少初始化时的资源消耗。

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