Flutter Quill：如何处理QuillEditor变更以控制按钮激活状态

问题分析 #

你遇到的两个问题本质都是状态更新方式错误导致的：

• 在onSelectionChanged里调用setState：每次光标移动、选中文本都会触发回调，频繁的setState会让QuillEditor反复重建，丢失输入焦点和编辑状态，自然无法正常编辑。
• 监听document.changes却不调用setState：按钮的禁用状态依赖组件状态更新，不触发setState的话Flutter不会重绘按钮，状态自然没变化；但直接在changes回调里调用setState又会导致整个组件重建，可能影响编辑器性能。

正确实现方式 #

用ValueListenableBuilder监听QuillController.document的变化，它只会重建按钮相关的部分，既保证按钮状态及时更新，又不会影响QuillEditor的编辑功能。

代码示例 #

import 'package:flutter/material.dart';
import 'package:quill_html_editor/quill_html_editor.dart'; // 或你使用的quill相关包

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

  @override
  State<QuillEditorPage> createState() => _QuillEditorPageState();
}

class _QuillEditorPageState extends State<QuillEditorPage> {
  final QuillController _controller = QuillController.basic();

  void _onSubmit() {
    // 提交逻辑
    print(_controller.document.toPlainText());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Quill编辑器')),
      body: Column(
        children: [
          Expanded(
            child: QuillEditor(
              controller: _controller,
              // 其他配置
              autoFocus: true,
              padding: const EdgeInsets.all(16),
            ),
          ),
          // 用ValueListenableBuilder包裹按钮
          Padding(
            padding: const EdgeInsets.all(16),
            child: ValueListenableBuilder<Document>(
              valueListenable: _controller.document,
              builder: (context, document, child) {
                // 判断文档是否非空（可根据需求调整是否trim）
                final canSubmit = document.toPlainText().trim().isNotEmpty;
                return ElevatedButton(
                  onPressed: canSubmit ? _onSubmit : null,
                  child: const Text('提交'),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

关键说明 #

• _controller.document本身是一个ValueListenable，文档内容变化时会自动通知ValueListenableBuilder。
• builder函数只会重建按钮组件，不会影响上方的QuillEditor，避免了之前的编辑问题。
• 判断文档是否为空时用toPlainText().trim().isNotEmpty，可以过滤掉纯空白字符的情况，如果你允许空白字符作为有效内容，去掉trim()即可。

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