Flutter Quill编辑器共享控制器导致的ANR问题分析

2025-06-29 13:03:29作者：董宙帆

问题概述

在使用Flutter Quill富文本编辑器时，开发者发现当两个编辑器实例共享同一个QuillController控制器时，应用程序会出现ANR（Application Not Responding）问题。在Web环境下，输入第一个字符后应用就会冻结；在Android平台上，虽然能承受一些交互操作，但最终仍会导致ANR。

问题重现

通过以下代码可以重现该问题：

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _controller = QuillController.basic();

  @override
  void initState() {
    super.initState();
    _controller.document = Document();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                config: QuillEditorConfig(),
              ),
            ),
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                config: QuillEditorConfig(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

技术分析

问题根源

控制器共享冲突：当两个编辑器共享同一个控制器时，任何对其中一个编辑器的操作都会同时触发两个编辑器的更新逻辑，形成循环更新。
事件循环阻塞：在Web环境下，这种循环更新会迅速阻塞事件循环，导致应用冻结；在Android上，由于性能差异，可能需要更多交互才会显现问题。
状态管理不当：QuillController内部的状态管理机制没有考虑到被多个编辑器实例共享的情况，导致状态同步出现问题。

解决方案

独立控制器：为每个编辑器实例创建独立的控制器，这是最直接的解决方案。
数据同步机制：如果确实需要同步显示相同内容，可以通过监听一个控制器的变化，然后将变化应用到另一个控制器，但要注意避免循环更新。
使用最新版本：根据开发者反馈，该问题在最新版本中可能已被修复。

最佳实践建议

避免控制器共享：除非有特殊需求，否则不要将同一个QuillController实例分配给多个编辑器。
内容同步实现：如需同步内容，可采用以下模式：

// 主编辑器控制器
final primaryController = QuillController.basic();
// 只读编辑器控制器
final secondaryController = QuillController.basic();

@override
void initState() {
  super.initState();
  primaryController.addListener(() {
    secondaryController.document = primaryController.document;
  });
}