Flutter富文本编辑器插件clia_flutter_quill的使用

clia_flutter_quill 是对 flutter_quill 的修改版本，使其与 flutter_quill_extensions 兼容。以下是其使用方法及相关代码示例。

背景信息

• flutter_quill_extensions 依赖于 math_keyboard，而 math_keyboard 依赖于 flutter_localizations（来自 SDK），flutter_localizations 又依赖于 intl 版本 0.17.0。
• flutter_quill 依赖于 i18n_extension 版本 7.0.0，而 i18n_extension 依赖于 intl 版本 0.18.0。

为了解决版本冲突问题，将 i18n_extension 的版本降级到 6.0.0，以兼容 flutter_quill_extensions。

示例代码

以下是一个完整的示例代码，展示如何在 Flutter 应用中集成 clia_flutter_quill 插件。

示例代码：主程序文件 (main.dart)

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart'; // 支持多语言
import 'pages/home_page.dart'; // 自定义页面

void main() {
  // 确保 Flutter 框架已初始化
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp()); // 启动应用
}

// 定义应用程序根组件
class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false, // 隐藏调试标签
      title: 'Quill Demo', // 应用名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
        visualDensity: VisualDensity.adaptivePlatformDensity, // 自适应屏幕密度
      ),
      // 支持多语言
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      // 支持的语言列表
      supportedLocales: [
        const Locale('en', 'US'), // 英文
        const Locale('zh', 'HK'), // 中文（香港）
      ],
      home: HomePage(), // 启动页面
    );
  }
}

示例代码：富文本编辑器页面 (home_page.dart)

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:clia_flutter_quill/clia_flutter_quill.dart'; // 引入 clia_flutter_quill

class HomePage extends StatefulWidget {
  [@override](/user/override)
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late final QuillController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    _controller = QuillController.basic(); // 初始化控制器
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Clia Flutter Quill 示例'), // 设置标题
      ),
      body: Column(
        children: [
          Expanded(
            child: QuillEditor(
              controller: _controller, // 绑定控制器
              scrollController: ScrollController(), // 滚动控制器
              scrollable: true, // 是否允许滚动
              focusNode: FocusNode(), // 焦点节点
              autoFocus: true, // 自动获取焦点
              readOnly: false, // 是否只读模式
              expands: false, // 是否扩展到全屏
              padding: EdgeInsets.all(16), // 内边距
            ),
          ),
          Row(
            children: [
              ElevatedButton(
                onPressed: () {
                  // 获取编辑器内容
                  final DocumentSnapshot snapshot = _controller.document;
                  print(snapshot.toDelta().toJson());
                },
                child: Text('打印内容'),
              ),
              SizedBox(width: 16),
              ElevatedButton(
                onPressed: () {
                  // 清空编辑器内容
                  _controller.clear();
                },
                child: Text('清空内容'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}