插件介绍

Simplistic Editor 是一个基于 Flutter 的文本编辑器示例，它展示了如何使用 TextEditingDeltas 和 DeltaTextInputClient 来扩展和收缩文本样式范围。这个编辑器提供了基础的文本编辑功能，并支持富文本样式（如粗体、斜体、下划线），同时实时展示文本编辑操作的历史记录。

核心功能特点：

• 富文本编辑：支持粗体、斜体、下划线等文本样式
• 实时历史记录：展示文本编辑操作的 TextEditingDelta 历史记录
• 样式扩展：支持在已设置样式的文本末尾继续输入时自动扩展样式
• 跨平台支持：支持包括鸿蒙在内的所有 Flutter 平台
• 可定制性：提供灵活的 API 以便开发者根据需求进行扩展

主要组件结构：

1. Visualization Layer：展示文本编辑操作的历史记录

   • TextEditingDeltaHistoryManager：管理文本编辑历史记录
   • TextEditingDeltaView：展示单个 TextEditingDelta 的内容

2. Replacements Layer：处理文本样式和扩展

   • ToggleButtonsStateManager：管理样式切换按钮的状态
   • TextEditingInlineSpanReplacement：表示文本范围和样式
   • ReplacementTextEditingController：管理文本样式替换

3. Text Input Layer：定义文本输入字段的外观和行为

   • BasicTextField：基础文本字段组件
   • BasicTextInputClient：实现 DeltaTextInputClient 接口

使用步骤

1. 包的引入

由于这是一个自定义修改版本的三方库，需要通过 Git 形式引入。在项目的 pubspec.yaml 文件中，添加以下依赖配置：

dependencies:
  simplistic_editor:
    git:
      url: "https://atomgit.com/"
      path: "packages/simplistic_editor/simplistic_editor"

然后运行 flutter pub get 命令来获取依赖。

2. API 的调用

基本使用

import 'package:flutter/material.dart';
import 'package:simplistic_editor/app_state.dart';
import 'package:simplistic_editor/app_state_manager.dart';
import 'package:simplistic_editor/basic_text_field.dart';
import 'package:simplistic_editor/formatting_toolbar.dart';
import 'package:simplistic_editor/replacements.dart';
import 'package:simplistic_editor/text_editing_delta_history_view.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return AppStateWidget(
      child: MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Simplistic Editor',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          useMaterial3: true,
        ),
        home: const MyHomePage(title: 'Simplistic Editor'),
      ),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late ReplacementTextEditingController _replacementTextEditingController;
  final FocusNode _focusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    _replacementTextEditingController = ReplacementTextEditingController();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _replacementTextEditingController = AppStateManager.of(context).appState.replacementsController;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Column(
            children: [
              // 格式化工具栏（粗体、斜体、下划线）
              const FormattingToolbar(),
              // 文本输入区域
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 35.0),
                  child: BasicTextField(
                    controller: _replacementTextEditingController,
                    style: const TextStyle(
                      fontSize: 18.0,
                      color: Colors.black,
                    ),
                    focusNode: _focusNode,
                  ),
                ),
              ),
              // 文本编辑历史记录
              const Expanded(
                child: TextEditingDeltaHistoryView(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

自定义文本样式

// 创建自定义的文本样式替换
TextEditingInlineSpanReplacement createCustomStyleReplacement(TextRange range) {
  return TextEditingInlineSpanReplacement(
    range: range,
    generator: (text) => TextSpan(
      text: text,
      style: const TextStyle(
        color: Colors.red,
        fontSize: 20.0,
        fontWeight: FontWeight.bold,
      ),
    ),
    expand: true, // 设置为true时，在样式文本末尾输入会自动扩展样式
  );
}

// 添加自定义样式到控制器
void addCustomStyle(ReplacementTextEditingController controller, TextRange range) {
  controller.replacements.add(createCustomStyleReplacement(range));
  controller.notifyListeners();
}

// 移除特定范围的样式
void removeStyle(ReplacementTextEditingController controller, TextRange range) {
  controller.removeStyleAtRange(range);
}

鸿蒙平台适配考虑

在鸿蒙平台使用 Simplistic Editor 包时，需要注意以下几点：

1. 平台特定样式：

   // 针对鸿蒙平台的特定样式设置
   Widget build(BuildContext context) {
     final isHarmonyOS = Theme.of(context).platform == TargetPlatform.ohos;
   
     return Container(
       decoration: BoxDecoration(
         border: Border.all(
           color: isHarmonyOS ? Colors.blue : Colors.black,
           width: isHarmonyOS ? 2.0 : 1.0,
         ),
         borderRadius: BorderRadius.all(Radius.circular(isHarmonyOS ? 8.0 : 4.0)),
       ),
       child: BasicTextField(
         // ...
       ),
     );
   }
   

2. 文本选择控制：

   // 针对鸿蒙平台的文本选择控制
   void _onLongPressMoveUpdate(LongPressMoveUpdateDetails details) {
     switch (Theme.of(context).platform) {
       case TargetPlatform.ohos:
         // 鸿蒙平台特定的文本选择逻辑
         _renderEditable.selectWordsInRange(
           from: details.globalPosition - details.offsetFromOrigin,
           to: details.globalPosition,
           cause: SelectionChangedCause.longPress,
         );
         break;
       default:
         // 其他平台的文本选择逻辑
         // ...
     }
   }
   

3. 响应式布局：

   // 鸿蒙平台的响应式布局
   Widget build(BuildContext context) {
     return LayoutBuilder(builder: (context, constraints) {
       final isTablet = constraints.maxWidth > 768;
   
       return Scaffold(
         body: Padding(
           padding: EdgeInsets.all(isTablet ? 32.0 : 16.0),
           child: Column(
             children: [
               const FormattingToolbar(),
               Expanded(
                 flex: isTablet ? 2 : 1,
                 child: BasicTextField(
                   // ...
                 ),
               ),
               Expanded(
                 flex: isTablet ? 1 : 1,
                 child: const TextEditingDeltaHistoryView(),
               ),
             ],
           ),
         ),
       );
     });
   }
   

总结

Simplistic Editor 是一个展示 Flutter 富文本编辑能力的示例项目，它通过 TextEditingDeltas 和 DeltaTextInputClient 提供了精细的文本编辑控制。在鸿蒙平台上使用这个编辑器时，开发者可以：

1. 实现基础的富文本编辑功能（粗体、斜体、下划线）
2. 自定义文本样式和扩展行为
3. 观察和分析文本编辑操作的历史记录
4. 根据鸿蒙平台的特点进行针对性的样式和布局调整

这个编辑器示例为开发者提供了一个很好的起点，可以在此基础上构建更复杂的富文本编辑应用。通过学习 TextEditingDelta 的使用，开发者可以更好地理解 Flutter 的文本输入系统，并开发出更强大的文本编辑功能。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net