Flutter中RichText/TextSpan无法识别\n换行的问题求助

你的CustomMarkupText组件目前能正常解析自定义的加粗、红色标记，但无法识别\n换行符，导致其直接以文本形式显示。以下是具体修复方案：

核心问题原因 #

当前解析逻辑仅处理了自定义的%r/%d标记，未对普通文本中的换行符做处理，若后端返回的\n是转义后的字符串（即\\n，两个字符：反斜杠+字母n），也会被当作普通文本渲染。

修复方案 #

修改_parseMarkup方法中处理普通文本的逻辑，将转义换行符替换为Dart原生换行符，让RichText自动识别换行：

完整修改后的组件代码 #

class CustomMarkupText extends StatelessWidget {
  final String text;

  CustomMarkupText(this.text);

  @override
  Widget build(BuildContext context) {
    final spans = _parseMarkup(text);
    return RichText(
      text: TextSpan(
        style: TextStyle(fontSize: 16, color: Colors.black),
        children: spans,
      ),
    );
  }

  List<TextSpan> _parseMarkup(String text) {
    final spans = <TextSpan>[];
    final regex = RegExp(r'%r(.*?)%r|%d(.*?)%d|([^%]+)');
    final matches = regex.allMatches(text);

    for (var match in matches) {
      if (match.group(1) != null) {
        // 红色文本：%r内容%r
        spans.add(TextSpan(
          text: match.group(1),
          style: TextStyle(color: Colors.red),
        ));
      } else if (match.group(2) != null) {
        // 加粗文本：%d内容%d
        spans.add(TextSpan(
          text: match.group(2),
          style: TextStyle(fontWeight: FontWeight.bold),
        ));
      } else if (match.group(3) != null) {
        // 处理普通文本中的换行符，将转义的\\n替换为原生换行符\n
        final normalText = match.group(3)!.replaceAll(r'\n', '\n');
        spans.add(TextSpan(text: normalText));
      }
    }

    return spans;
  }
}

效果验证 #

使用你提供的原始字符串测试，\n会被正确转换为换行，文本将按预期分成多行显示，同时保留原有加粗、红色格式的解析能力。

内容的提问来源于stack exchange，提问作者Luca Christ