Flutter开发：如何为API返回的动态文本指定内容设置颜色

要给API返回的动态文本里的单引号内容和ticket id设置不同颜色，用RichText结合正则解析就能搞定，具体步骤如下：

实现思路 #

1. 用正则匹配出单引号包裹的内容、以#开头的ticket id
2. 把原文本拆成多个TextSpan，给目标片段单独设置颜色样式
3. 用RichText组合这些片段渲染

代码示例 #

import 'package:flutter/material.dart';

class StyledDynamicText extends StatelessWidget {
  final String apiContent;

  const StyledDynamicText({super.key, required this.apiContent});

  @override
  Widget build(BuildContext context) {
    // 正则规则：匹配单引号内内容、ticket id
    final quotePattern = RegExp(r"'([^']+)'");
    final ticketPattern = RegExp(r'#[a-f0-9]+', caseSensitive: false);

    final textSpans = <TextSpan>[];
    int currentPos = 0;

    // 处理单引号内容
    for (final match in quotePattern.allMatches(apiContent)) {
      // 添加匹配前的普通文本
      if (match.start > currentPos) {
        textSpans.add(TextSpan(
          text: apiContent.substring(currentPos, match.start),
          style: const TextStyle(color: Colors.black87),
        ));
      }
      // 添加单引号内的红色文本
      textSpans.add(TextSpan(
        text: match.group(0),
        style: const TextStyle(color: Colors.redAccent),
      ));
      currentPos = match.end;
    }

    // 处理剩余文本中的ticket id
    final remainingText = apiContent.substring(currentPos);
    int ticketPos = 0;
    for (final match in ticketPattern.allMatches(remainingText)) {
      if (match.start > ticketPos) {
        textSpans.add(TextSpan(
          text: remainingText.substring(ticketPos, match.start),
          style: const TextStyle(color: Colors.black87),
        ));
      }
      // 添加ticket id的蓝色文本
      textSpans.add(TextSpan(
        text: match.group(0),
        style: const TextStyle(color: Colors.blueAccent),
      ));
      ticketPos = match.end;
    }

    // 添加最后剩余的普通文本
    if (ticketPos < remainingText.length) {
      textSpans.add(TextSpan(
        text: remainingText.substring(ticketPos),
        style: const TextStyle(color: Colors.black87),
      ));
    }

    return RichText(text: TextSpan(children: textSpans));
  }
}

// 使用方式
// StyledDynamicText(
//   apiContent: "Your query 'THIS IS TESTING SUBJECT TRYING TO EXPLORE HAHA .' has been raised with ticket id: #0606c2a23d9e",
// )

注意要点 #

• 若API返回的文本格式变动（如单引号换双引号、ticket id格式修改），需同步调整正则规则
• 可按需自定义样式，比如增加字体加粗、调整字号等
• 长文本场景中，可将RichText嵌套在SingleChildScrollView内避免溢出

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