如何自定义Flutter Quill工具栏仅保留指定编辑按钮？

1. 升级依赖到10.1.6 #

首先更新pubspec.yaml中的flutter_quill版本：

dependencies:
  flutter_quill: ^10.1.6

执行flutter pub get完成依赖更新。

2. 构建自定义工具栏 #

通过QuillToolbar.basic并指定toolbarButtons参数，只保留所需功能按钮：

Widget buildCustomQuillToolbar(QuillController controller) {
  return QuillToolbar.basic(
    controller: controller,
    toolbarButtons: [
      // 基础文本格式按钮
      const BoldButton(),
      const ItalicButton(),
      const UnderlineButton(),
      // 有序列表按钮
      const OrderedListButton(),
      // 字体大小调整按钮
      FontSizeButton(),
      // 字体颜色选择按钮
      FontColorButton(),
    ],
    // 可选：自定义工具栏样式
    toolbarIconSize: 24,
    toolbarIconColor: Colors.black87,
    toolbarBackgroundColor: Colors.grey[100],
    border: const Border(bottom: BorderSide(color: Colors.grey.shade300)),
  );
}

3. 集成到现有页面 #

将自定义工具栏与QuillEditor结合，嵌入到已有页面结构中：

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

  @override
  State<YourTextEditorPage> createState() => _YourTextEditorPageState();
}

class _YourTextEditorPageState extends State<YourTextEditorPage> {
  late final QuillController _quillController;

  @override
  void initState() {
    super.initState();
    // 初始化编辑器控制器，可传入初始内容
    _quillController = QuillController.basic();
  }

  @override
  void dispose() {
    // 销毁控制器避免内存泄漏
    _quillController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('文本编辑')),
      body: Column(
        children: [
          // 插入自定义工具栏
          buildCustomQuillToolbar(_quillController),
          // 文本编辑器区域
          Expanded(
            child: QuillEditor.basic(
              controller: _quillController,
              readOnly: false,
              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            ),
          ),
        ],
      ),
    );
  }
}

关键说明 #

• 所有按钮均使用flutter_quill内置组件，无需额外实现核心功能
• 若需调整按钮样式，可通过每个按钮的构造参数自定义图标、大小等（例如BoldButton(icon: const Icon(Icons.format_bold), iconSize: 22)）
• 确保QuillController在页面生命周期中正确初始化和销毁，防止内存泄漏

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