Flutter：如何在ListView.Builder中替换并样式化列表指定字符串

实现思路 #

要处理这类带自定义颜色标记的文本，核心是解析字符串并拆分出普通文本和带样式的文本片段，再通过RichText组合这些片段，最后用ListView.Builder批量渲染。

具体实现 #

1. 编写文本解析函数 #

用正则表达式匹配[color="..."]和[/color]包裹的内容，将原始字符串拆分为多个TextSpan（普通文本或带颜色的文本）：

import 'package:flutter/material.dart';

List<TextSpan> parseColoredText(String text) {
  // 匹配颜色标记的正则：捕获颜色值和对应文本
  final colorPattern = RegExp(r'\[color="(.*?)"\](.*?)\[/color\]');
  final spans = <TextSpan>[];
  int currentPos = 0;

  // 遍历所有匹配结果
  for (final match in colorPattern.allMatches(text)) {
    // 添加标记前的普通文本
    if (match.start > currentPos) {
      spans.add(TextSpan(text: text.substring(currentPos, match.start)));
    }

    // 提取颜色名和目标文本
    final colorName = match.group(1)!;
    final targetText = match.group(2)!;

    // 颜色映射：可根据需求扩展更多颜色
    final colorMap = <String, Color>{
      'black': Colors.black,
      'blue': Colors.blue,
      // 可扩展：'red': Colors.red, 'green': Colors.green
    };
    final textColor = colorMap[colorName] ?? Colors.black; // 默认黑色

    // 添加带颜色的文本Span
    spans.add(TextSpan(
      text: targetText,
      style: TextStyle(color: textColor),
    ));

    // 更新当前位置到匹配结束处
    currentPos = match.end;
  }

  // 添加剩余的普通文本
  if (currentPos < text.length) {
    spans.add(TextSpan(text: text.substring(currentPos)));
  }

  return spans;
}

2. 用ListView.Builder渲染 #

遍历你的字符串列表，每个item通过RichText展示解析后的TextSpan：

// 假设这是你从JSON加载的字符串列表
final List<String> textList = [
  'It was getting [color="black"]dark[/color], and we weren’t [color="blue"]there[/color] yet.',
  'They got [color="black"]there[/color] early, and they got really [color="black"]good[/color] seats.',
  'Mr. Montoya knows the way to the [color="black"]bakery[/color] even though he\'s never been [color="blue"]there[/color].',
];

// 在Widget树中使用ListView.Builder
ListView.builder(
  padding: const EdgeInsets.all(16),
  itemCount: textList.length,
  itemBuilder: (context, index) {
    final parsedSpans = parseColoredText(textList[index]);
    return Padding(
      padding: const EdgeInsets.only(bottom: 12),
      child: RichText(
        text: TextSpan(
          // 继承当前上下文的默认文本样式（字号、字体等）
          style: DefaultTextStyle.of(context).style,
          children: parsedSpans,
        ),
      ),
    );
  },
)

关键点说明 #

• 正则表达式采用非贪婪匹配，确保正确捕获每个独立的颜色标记块，不会出现跨标记匹配的问题。
• 颜色映射表可按需扩展，支持更多颜色类型。
• RichText是Flutter实现富文本的核心组件，通过组合多个TextSpan，可以轻松实现不同样式文本的混合展示。

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