如何在Flutter Quill 7.4.1工具栏中添加下拉选择组件？

Quill 7.x版本的默认工具栏确实没有内置标题下拉选择组件，但可以通过工具栏的customButtons字段自定义实现，以下是适配Flutter 3.13.0的具体方案：

1. 封装标题下拉按钮组件 #

创建一个StatefulWidget，集成DropdownButton并处理Quill格式的读写逻辑：

class QuillHeaderDropdown extends StatefulWidget {
  final QuillController controller;

  const QuillHeaderDropdown({super.key, required this.controller});

  @override
  State<QuillHeaderDropdown> createState() => _QuillHeaderDropdownState();
}

class _QuillHeaderDropdownState extends State<QuillHeaderDropdown> {
  final Map<int, String> _headerOptions = const {
    0: '正文',
    1: '标题 1',
    2: '标题 2',
    3: '标题 3',
  };

  late int _selectedLevel;

  @override
  void initState() {
    super.initState();
    _updateSelectedLevel();
    widget.controller.addListener(_updateSelectedLevel);
  }

  @override
  void dispose() {
    widget.controller.removeListener(_updateSelectedLevel);
    super.dispose();
  }

  void _updateSelectedLevel() {
    final selection = widget.controller.selection;
    if (selection.isCollapsed) {
      final style = widget.controller.getStyleAt(selection.start);
      final headerAttr = style.attributes[Attribute.header.key];
      setState(() {
        _selectedLevel = headerAttr != null ? (headerAttr.value as int) : 0;
      });
    }
  }

  void _applyHeader(int level) {
    if (level == 0) {
      widget.controller.formatSelection(Attribute.header.unset);
    } else {
      widget.controller.formatSelection(Attribute.header.fromInt(level));
    }
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton<int>(
        value: _selectedLevel,
        items: _headerOptions.entries.map((entry) {
          return DropdownMenuItem(
            value: entry.key,
            child: Text(entry.value),
          );
        }).toList(),
        onChanged: (value) => value != null ? _applyHeader(value) : null,
        icon: const Icon(Icons.arrow_drop_down),
        style: const TextStyle(fontSize: 14),
      ),
    );
  }
}

2. 集成到Quill工具栏 #

在QuillToolbar的customButtons数组中添加这个自定义组件：

QuillToolbar.basic(
  controller: _quillController,
  customButtons: [
    (context, toolbarController) {
      return QuillHeaderDropdown(controller: _quillController);
    },
  ],
  // 保留其他工具栏默认配置...
)

3. 可选：统一工具栏样式 #

如果需要下拉按钮和原生工具栏按钮风格一致，可以用QuillToolbarButton包裹：

customButtons: [
  (context, toolbarController) {
    return QuillToolbarButton(
      icon: const Icon(Icons.format_size),
      onPressed: () {},
      child: QuillHeaderDropdown(controller: _quillController),
    );
  },
],

这个组件会自动同步当前光标位置的格式状态，点击下拉选项即可快速切换正文/各级标题样式。

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