如何实现Flutter_quill包官方提到的可水平滚动工具栏？

核心实现思路 #

flutter_quill的原生工具栏本身支持外层嵌套滚动组件，仅需用水平方向的SingleChildScrollView包裹默认的QuillToolbar组件即可实现预期效果，无需自定义重写整个工具栏逻辑。

完整示例代码 #

import 'package:flutter_quill/flutter_quill.dart';

// 页面build方法内的核心结构
@override
Widget build(BuildContext context) {
  return Column(
    children: [
      // 水平滚动工具栏核心实现
      SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 8),
        child: QuillToolbar.basic(
          controller: _quillController,
          // 按需配置工具栏按钮显示/隐藏
          showAlignmentButtons: true,
          showBackgroundColorButton: true,
          showBoldButton: true,
          // 其余配置参数根据业务需求自定义
        ),
      ),
      // 编辑器区域
      Expanded(
        child: QuillEditor.basic(
          controller: _quillController,
          readOnly: false,
        ),
      )
    ],
  );
}

优化建议 #

• 若工具栏按钮数量过多，可通过QuillToolbar的customButtons参数拆分功能分类，避免滚动长度过长
• 可通过toolbarIconSize参数统一调整按钮尺寸，适配不同屏幕宽度
• 若需要实现工具栏吸顶效果，可将工具栏嵌套入SliverAppBar的flexibleSpace区域使用

效果参考 #

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