Flutter-Quill富文本编辑器自定义字体粗细实现方案

背景概述

在Flutter-Quill富文本编辑器开发过程中，开发者常遇到需要扩展文本样式功能的需求。标准编辑器已内置粗体（Bold）属性，但实际业务中可能需要更细粒度的字体粗细控制（如font-weight:800）。本文将深入讲解如何通过自定义属性和样式构建器实现这一功能。

核心实现原理

1. 自定义属性类

Flutter-Quill的样式系统基于Attribute类体系，需要创建继承自Attribute的新类：

class FontWeightAttribute extends Attribute {
  final int weight;

  const FontWeightAttribute(this.weight) : super('fw$weight');

  @override
  TextStyle apply(TextStyle style) {
    return style.copyWith(fontWeight: FontWeight.values[weight ~/ 100 - 1]);
  }
}

2. 权重值映射

Flutter的FontWeight枚举实际对应数值：

• w100 (Thin)
• w200 (ExtraLight)
• ...
• w900 (Black)

需注意数值范围校验（100-900，间隔100）

完整实现步骤

步骤一：注册自定义属性

在编辑器初始化时注册新属性：

final customAttributes = [
  FontWeightAttribute(800),
  // 可扩展其他权重值
];

步骤二：配置编辑器

通过QuillEditorConfig应用自定义样式：

QuillEditor(
  config: QuillEditorConfig(
    customStyles: DefaultStyles(
      attributes: {
        'fw800': TextStyle(fontWeight: FontWeight.w800),
      },
    ),
    customStyleBuilder: (attribute) {
      if (attribute.key.startsWith('fw')) {
        final weight = int.parse(attribute.key.substring(2));
        return TextStyle(fontWeight: FontWeight.values[weight ~/ 100 - 1]);
      }
      return null;
    },
  ),
)

步骤三：工具栏集成（可选）

如需界面控制，可扩展工具栏：

QuillToolbar.basic(
  customButtons: [
    QuillCustomButton(
      icon: Icons.format_bold,
      onTap: () => controller.formatSelection(FontWeightAttribute(800)),
    ),
  ],
)

高级技巧

1. 动态权重输入：可结合Slider组件实现实时调整
2. 主题集成：通过ThemeExtension实现全局权重样式管理
3. Delta格式处理：重写Document的toDelta()方法确保权重属性持久化

注意事项

1. 移动端需测试各字重在不同设备上的渲染效果
2. 考虑与现有粗体属性的互斥逻辑
3. Web端需注意字体文件是否包含所有字重变体

结语

通过Flutter-Quill的灵活架构，开发者可以轻松扩展文本样式系统。本文方案不仅适用于字体粗细，其设计思路也可应用于其他自定义文本属性的实现，为富文本编辑提供更专业的排版控制能力。