Flutter富文本编辑插件rtf_textfield的使用

Flutter富文本编辑插件rtf_textfield的使用

插件介绍

rtf_textfield 是一个用于创建富文本输入框的Flutter自定义小部件。它提供了 RTFTextFieldController 来自定义文本、提示文本和标签文本，并支持数据序列化（以JSON格式存储和获取带样式的文本）。以下是该插件的主要特性：

• ✅ 自定义提示文本
• ✅ 自定义标签文本
• ✅ 数据序列化（以JSON格式存储和获取带样式的文本）
• ✅ 使用 RTFTextFieldController 自定义文本样式（如颜色、样式、大小、粗细等）

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 rtf_textfield 依赖：

dependencies:
  rtf_textfield: ^1.0.1

2. 导入包

在 Dart 文件中导入 rtf_textfield 包：

import 'package:rtf_textfield/rtf_textfield.dart';

3. 使用示例

以下是一个完整的示例代码，展示了如何在项目中使用 RTFTextField 小部件。这个示例包括了一个带有自定义提示文本和标签文本的富文本输入框，并通过 FloatingActionButton 实现了切换粗体的功能。

import 'package:flutter/material.dart';
import 'package:rtf_textfield/rtf_textfield.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final RTFTextFieldController controller = RTFTextFieldController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Image.asset(
          'assets/images/rich_text_field.png', // 请确保图片路径正确
          height: 50,
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: <Widget>[
            RTFTextField(
              onTapOutside: (event) {
                FocusManager.instance.primaryFocus?.unfocus(); // 点击外部时收起键盘
              },
              decoration: const RichInputDecoration(
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(16)), // 输入框边框圆角
                ),
                enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(
                    color: Colors.grey, // 输入框未聚焦时的边框颜色
                  ),
                  borderRadius: BorderRadius.all(Radius.circular(16)), // 输入框未聚焦时的边框圆角
                ),
                labelTextSpan: TextSpan(
                  text: 'Enter your name', // 标签文本
                  children: [
                    TextSpan(
                      text: ' *', // 必填项提示
                      style: TextStyle(
                        color: Colors.red, // 必填项提示的颜色
                      ),
                    ),
                  ],
                ),
                hintTextSpan: TextSpan(
                  text: 'Yelaman', // 提示文本
                ),
              ),
              controller: controller, // 绑定控制器
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.toggleBold(); // 切换粗体
        },
        tooltip: 'Toggle Bold', // 按钮提示
        child: const Icon(Icons.format_bold), // 粗体图标
      ),
    );
  }
}