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

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

Flutter自定义组件创建富文本输入框 🚀

包含RTFTextFieldController用于自定义文本、提示和标签文本样式 😊
给予一些❤️并收藏仓库以支持项目！

📌 功能 #

• ✅ 自定义提示
• ✅ 自定义标签
• ✅ 数据序列化 (以JSON格式存储和获取带样式的文本)
• ✅ 使用RTFTextFieldController自定义文本特性 (改变颜色、样式、大小等)

📌 开始使用 #

请遵循以下步骤来使用此包。

添加依赖 #

dependencies:
  sunday_rtf_textfield: ^1.0.1

导入包 #

import 'package:sunday_rtf_textfield/sunday_rtf_textfield.dart';

易于使用 #

以下是使用RTFTextField的简单示例。
将此代码放在您的项目中并了解其工作原理 😊

组件部分：

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: '请输入您的名字',
         children: [
            TextSpan(
               text: ' *',
               style: TextStyle(
                  color: Colors.red,
               ),
            ),
         ],
      ),
      hintTextSpan: TextSpan(
         text: 'Yelaman',
         ),
      ),
   controller: controller,
),

通过RTFTextFieldController更改文本粗细：

controller.toggleBold();

📌 示例 #

您可以在此处检查更多使用此包的示例 此处为链接

感谢所有为这个包做出贡献的人

示例代码

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:sunday_rtf_textfield/sunday_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: '请输入您的名字',
                  children: [
                    TextSpan(
                      text: ' *',
                      style: TextStyle(
                        color: Colors.red,
                      ),
                    ),
                  ],
                ),
                hintTextSpan: TextSpan(
                  text: 'Yelaman',
                ),
              ),
              controller: controller,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          controller.toggleBold();
        },
        tooltip: '加粗',
        child: const Icon(Icons.add),
      ),
    );
  }
}