Flutter富文本输入框在鸿蒙系统的适配与@功能实现

1. 项目背景与核心需求

在跨平台应用开发中，Flutter因其高效的渲染性能和跨平台特性广受欢迎。而随着鸿蒙系统的崛起，开发者面临如何将现有Flutter生态迁移到鸿蒙平台的实际需求。FlutterTextSpanField作为富文本输入的核心组件，其@用户功能在社交类应用中尤为关键。

这个功能看似简单，实则包含三个技术层级：

• 基础层：实现文本与@标签的混合渲染
• 逻辑层：维护隐藏的用户ID与可见文本的映射关系
• 传输层：结构化封装数据供后端处理

2. 鸿蒙适配关键技术点

2.1 跨平台架构设计

Flutter的跨平台特性主要依赖Skia渲染引擎和Dart运行时。在鸿蒙适配时需注意：

dart复制// 典型的三层架构设计
Widget 
  ↓ 
Platform Channel 
  ↓ 
HarmonyOS Native Code

鸿蒙与Flutter的通信通过FFI（Foreign Function Interface）实现，关键要处理：

1. 线程模型差异：鸿蒙使用ACE引擎的独立线程
2. 事件循环：协调Dart事件循环与鸿蒙主线程
3. 内存管理：避免跨平台内存泄漏

2.2 TextSpanField核心改造

原始FlutterTextSpanField需要增强：

dart复制class OhosTextSpanField extends FlutterTextSpanField {
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 鸿蒙特有生命周期处理
    _registerHarmonyCallbacks();
  }
  
  void _handleHarmonyInput(String text) {
    // 处理鸿蒙输入法特殊事件
  }
}

3. @功能实现详解

3.1 数据结构设计

采用组合模式处理文本片段：

dart复制abstract class TextSegment {
  String get content;
  Map<String, dynamic> toJson();
}

class PlainTextSegment implements TextSegment {
  final String text;
  
  @override
  Map<String, dynamic> toJson() => {'type': 'text', 'content': text};
}

class MentionSegment implements TextSegment {
  final String display;
  final String uid;
  
  @override
  Map<String, dynamic> toJson() => {
    'type': 'mention',
    'display': display,
    'uid': uid
  };
}

3.2 输入事件处理流程

1. 监听文本变化：

dart复制controller.addListener(() {
  _parseMentions(controller.text);
});

2. 使用正则匹配@模式：

dart复制final mentionRegex = RegExp(r'@(\w+)(?=\s|$)');
List<Match> matches = mentionRegex.allMatches(text).toList();

3. 构建段落树：

dart复制List<TextSegment> _buildSegmentTree(String text) {
  // 实现文本分段算法
}

4. 数据序列化方案

4.1 客户端数据结构

json复制{
  "raw_text": "Hello @张三",
  "segments": [
    {"type": "text", "content": "Hello "},
    {"type": "mention", "uid": "u1001", "display": "张三"}
  ]
}

4.2 服务端兼容格式

json复制{
  "content": "Hello @张三",
  "mentions": ["u1001"]
}

转换方法：

dart复制String serializeForServer(List<TextSegment> segments) {
  final buffer = StringBuffer();
  final mentions = <String>[];
  
  for (final segment in segments) {
    if (segment is MentionSegment) {
      buffer.write('@${segment.display}');
      mentions.add(segment.uid);
    } else {
      buffer.write(segment.content);
    }
  }
  
  return jsonEncode({
    'content': buffer.toString(),
    'mentions': mentions
  });
}

5. 鸿蒙平台特殊处理

5.1 输入法兼容方案

鸿蒙输入法需要特殊适配：

dart复制void _handleHarmonyIME() {
  // 解决鸿蒙输入法候选词问题
  final defaultTargetPlatform = Theme.of(context).platform;
  if (defaultTargetPlatform == TargetPlatform.harmony) {
    _specialHandlingForHarmony();
  }
}

5.2 性能优化要点

1. 避免频繁重建Widget树
2. 使用RepaintBoundary隔离文本渲染
3. 实现compute方法进行后台解析

dart复制Future<List<TextSegment>> parseInBackground(String text) async {
  return await compute(_parseSegments, text);
}

6. 完整实现示例

6.1 组件集成方案

dart复制class MentionInputField extends StatefulWidget {
  @override
  _MentionInputFieldState createState() => _MentionInputFieldState();
}

class _MentionInputFieldState extends State<MentionInputField> {
  final _controller = TextEditingController();
  final _segmentParser = SegmentParser();
  
  List<TextSegment> _segments = [];
  
  @override
  void initState() {
    super.initState();
    _controller.addListener(_handleTextChange);
  }
  
  void _handleTextChange() async {
    final segments = await _segmentParser.parse(_controller.text);
    setState(() => _segments = segments);
  }
  
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: _controller,
          decoration: InputDecoration(
            hintText: '输入@提及用户'
          ),
        ),
        _buildMentionPreview(),
      ],
    );
  }
}

6.2 服务端交互流程

dart复制Future<void> submitContent() async {
  final apiClient = ApiClient();
  final response = await apiClient.post(
    '/api/content',
    body: {
      'content': _controller.text,
      'mentions': _segments
          .whereType<MentionSegment>()
          .map((m) => m.uid)
          .toList()
    }
  );
  
  if (response.success) {
    showSuccessToast();
  } else {
    showErrorDialog(response.error);
  }
}

7. 调试与问题排查

7.1 常见问题清单

7.2 性能监测工具

dart复制void _checkPerformance() {
  final stopwatch = Stopwatch()..start();
  // 执行待测代码
  debugPrint('耗时: ${stopwatch.elapsedMilliseconds}ms');
  
  // 内存检查
  MemoryAllocations.instance.addListener((event) {
    debugPrint('内存分配: $event');
  });
}

8. 进阶优化方向

1. 实现@用户建议列表：

dart复制OverlayEntry _showUserSuggestions(List<User> users) {
  return OverlayEntry(
    builder: (context) => Positioned(
      child: Material(
        child: ListView.builder(
          itemCount: users.length,
          itemBuilder: (_, index) => ListTile(
            title: Text(users[index].name),
            onTap: () => _insertMention(users[index]),
          ),
        ),
      ),
    ),
  );
}

2. 添加撤回功能：

dart复制final _history = <List<TextSegment>>[];
void _saveToHistory() {
  _history.add(List.from(_segments));
}

void undo() {
  if (_history.isNotEmpty) {
    setState(() => _segments = _history.removeLast());
  }
}

3. 多平台样式适配：

dart复制TextStyle get mentionStyle {
  if (Theme.of(context).platform == TargetPlatform.harmony) {
    return TextStyle(color: Colors.blue, fontWeight: FontWeight.w500);
  } else {
    return TextStyle(color: Colors.blueAccent);
  }
}

在实际项目中，我们发现鸿蒙平台对文本测量的处理略有不同，需要额外处理文字基线对齐问题。通过重写TextPainter的layout方法，可以确保跨平台显示一致性。