如何减小Flutter Quill工具栏图标内边距并修改选中图标样式？

一、调整Flutter Quill工具栏的图标间距与选中样式 #

QuillSimpleToolbarConfigurations没有直接提供修改图标内边距和选中装饰的参数，但可以通过toolbarButtonBuilder自定义按钮实现需求：

1. 减小图标之间的内边距 #

在你的配置中添加toolbarButtonBuilder，自定义按钮的padding来缩小间距：

final config = QuillSimpleToolbarConfigurations(
  color: Colors.white,
  multiRowsDisplay: true,
  toolbarSectionSpacing: 0,
  // 保留原有其他配置...
  toolbarButtonBuilder: (context, buttonOptions) {
    return Padding(
      // 按需调整数值，缩小图标间的内外边距
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
      child: QuillToolbarButton(
        options: buttonOptions,
        child: Container(
          padding: const EdgeInsets.all(4), // 图标内部的padding
          child: buttonOptions.icon,
        ),
      ),
    );
  },
);

2. 修改选中图标的装饰样式 #

通过buttonOptions.isActive判断按钮状态，自定义选中时的装饰（比如背景色、边框、圆角等）：

toolbarButtonBuilder: (context, buttonOptions) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 2),
    child: QuillToolbarButton(
      options: buttonOptions,
      child: Container(
        decoration: buttonOptions.isActive
            ? BoxDecoration(
                color: Colors.blue.withOpacity(0.2), // 选中时的背景色
                borderRadius: BorderRadius.circular(4), // 圆角
              )
            : null,
        padding: const EdgeInsets.all(4),
        child: buttonOptions.icon,
      ),
    ),
  );
},

如果需要更彻底的自定义，也可以直接用IconButton替代QuillToolbarButton，完全控制按钮的状态样式：

toolbarButtonBuilder: (context, buttonOptions) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 3, vertical: 1),
    child: IconButton(
      icon: buttonOptions.icon,
      onPressed: buttonOptions.onPressed,
      color: buttonOptions.isActive ? Colors.blue : Colors.grey,
      iconSize: 18,
      padding: const EdgeInsets.all(4),
      style: ButtonStyle(
        backgroundColor: MaterialStateProperty.all(
          buttonOptions.isActive ? Colors.blue.withOpacity(0.1) : null,
        ),
        shape: MaterialStateProperty.all(
          RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
        ),
      ),
    ),
  );
},

二、Flutter富文本编辑器替代方案 #

如果flutter_quill不符合你的需求，可以考虑以下几个常用选项：

• Zefyr：轻量级编辑器，UI简洁，API简单，适合快速集成基础富文本功能，但功能覆盖不如flutter_quill全面，维护活跃度一般。
• ProseMirror Flutter：基于Web端成熟的ProseMirror框架，功能强大，支持复杂文档结构与自定义扩展，但学习曲线较陡，集成成本高。
• RichTextEditor：原生风格编辑器，支持基础格式化、图片插入等，体积小性能稳定，但可定制性较弱。
• Flutter Markdown Editor：专注于Markdown语法的编辑与预览，体验流畅，适合技术类文档编辑场景。

总体而言，flutter_quill仍是功能最全面、社区活跃度较高的选择，除非有特定轻量化或复杂定制需求，否则优先推荐继续使用。

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