使用 flutter_quill 实现富文本编辑器

概述

本文展示了如何使用 flutter_quill 库构建一个基本的富文本编辑器。编辑器支持文字格式化（如加粗、下标、上标等），以及对内容的保存、编辑等功能。通过实现一个带有工具栏和文本编辑区域的UI，用户可以方便地输入、编辑并保存富文本内容。

主要功能

1. 富文本编辑功能：

   • 支持多种文本格式化，如加粗、下标、上标、内联代码、代码块等。
   • 使用 QuillEditor 控件来显示和编辑文本内容。

2. 工具栏功能：

   • 使用 QuillSimpleToolbar 提供一个简洁的文本格式化工具栏。
   • 可以动态显示和隐藏工具栏的按钮，如字体选择、任务列表、代码块、引用等。

3. 保存功能：

   • 提供一个“保存”按钮，用于获取富文本内容并将其转化为 Delta 格式（JSON格式），以便后续存储或传输。

4. 屏幕适配：

   • 在不同的设备上使用了 IntrinsicHeight 来处理高度自适应，确保UI的灵活性和可响应性。

5. 动态切换工具栏按钮：

   • 通过点击“全屏”按钮动态切换工具栏的显示状态，允许用户根据需要显示更多格式化选项。

效果展示

语言设置：

• 为了支持多语言环境，我们需要在 MaterialApp 中添加 FlutterQuillLocalizations.delegate，并指定应用支持的语言。这样就可以让工具栏的按钮在不同语言环境下进行切换和显示。 ``

MaterialApp(
  localizationsDelegates: [
    FlutterQuillLocalizations.delegate, // FlutterQuill 本地化
    GlobalMaterialLocalizations.delegate, // Material 本地化
    GlobalCupertinoLocalizations.delegate, // Cupertino 本地化
    GlobalWidgetsLocalizations.delegate, // Widgets 本地化
  ],
  supportedLocales: [
    Locale('zh', 'HK'), // 支持繁体中文（香港）
    Locale('en', 'US'), // 支持英语
  ],
  home: FlutterQuillEditor(),
);

完整代码

import 'package:flutter/material.dart';
import 'package:flutter_quill/flutter_quill.dart';
import 'dart:convert';

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

  @override
  State<FlutterQuillEditor> createState() => _FlutterQuillEditorState();
}

class _FlutterQuillEditorState extends State<FlutterQuillEditor> {
  // 创建 QuillController 控制器
  final QuillController _controller = QuillController.basic();
  final ScrollController _scrollController = ScrollController();
  final FocusNode _focusNode = FocusNode();
  bool isOpen = false;

  @override
  void initState() {
    super.initState();
    // 如果有默认的内容，可以初始化
    final doc = Document.fromJson([
      {"insert": "Hello, world! "},
      {
        "insert": "This is a formatted text.",
        "attributes": {"bold": true}
      },
      {"insert": "\n"}
    ]);
    _controller.document = doc;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('富文本编辑器')),
      body: Container(
        padding: EdgeInsets.all(16),
        margin: EdgeInsets.all(16),
        decoration: BoxDecoration(
          // color: Colors.grey.withOpacityValue(0.2), // 设置底色
          border: Border.all(color: Colors.grey, width: 0.5),
          borderRadius: BorderRadius.circular(8), // 设置圆角（可选）
        ),
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Expanded(
                  child: IntrinsicHeight(
                    child: Container(
                      constraints: BoxConstraints(
                        maxHeight: 100, // 设置最大高度
                      ),
                      alignment: Alignment.centerLeft,
                      child: SingleChildScrollView(
                        child: QuillSimpleToolbar(
                          configurations: QuillSimpleToolbarConfigurations(
                            toolbarIconAlignment: WrapAlignment.start,
                            // 均匀分布按钮
                            toolbarIconCrossAlignment:
                                WrapCrossAlignment.center,
                            // 垂直居中对齐
                            showFontFamily: false,
                            // 禁用字体选择
                            showSubscript: isOpen,
                            // 下标
                            showSuperscript: isOpen,
                            // 上标
                            showInlineCode: isOpen,
                            // 内联代码
                            showCodeBlock: isOpen,
                            // 代码块
                            showListCheck: isOpen,
                            // 任务列表
                            showQuote: isOpen,
                            // 引言
                            showLink: isOpen,
                            // 链接
                            showSearchButton: isOpen, // 搜索
                          ),
                          controller: _controller,
                        ),
                      ),
                    ),
                  ),
                ),
                IconButton(
                    onPressed: () {
                      setState(() {
                        isOpen = !isOpen;
                      });
                    },
                    icon: Icon(
                        isOpen ? Icons.fullscreen_exit : Icons.fullscreen)),
                SizedBox(width: 8),
                ElevatedButton(
                  onPressed: () async {
                    // 获取 Delta 格式的内容
                    String deltaContent = await getDeltaContent();
                    debugPrint('打印jsonFormattedText：${json.encode({
                          'formattedText': deltaContent
                        })} ');
                  },
                  child: Text('保存'),
                ),
              ],
            ),
            Divider(),
            SizedBox(height: 10),
            Expanded(
              child: QuillEditor.basic(
                controller: _controller,
                focusNode: _focusNode, // 传入 FocusNode
                scrollController: _scrollController, // 传入 ScrollController
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 获取富文本内容并转化为 Delta 格式（JSON）
  Future<String> getDeltaContent() async {
    var document = _controller.document;
    var delta = document.toDelta(); // 转换为 Delta 格式
    return json.encode(delta.toJson()); // 转换为 JSON 字符串
  }

  @override
  void dispose() {
    // 确保控制器在 widget 销毁时被正确销毁
    _controller.dispose();
    _focusNode.dispose();
    _scrollController.dispose();
    super.dispose();
  }
}

总结

该技术实现展示了如何在Flutter中通过 flutter_quill 创建一个功能丰富的富文本编辑器，并能够支持多种文本格式化、内容保存、动态配置等功能。此编辑器适用于需要文本格式化的应用场景，如富文本输入、邮件编写、博客编辑等。