Flutter：如何将列表中<link>包裹文本替换为GestureDetector组件

要实现将<link>标签包裹的文本转为可点击组件，你需要先解析字符串拆分普通文本和链接内容，再用RichText结合TextSpan实现混合文本与可点击区域，具体步骤如下：

1. 编写字符串解析函数 #

这个函数会把带标签的句子拆分成普通文本段和链接文本段的列表：

import 'package:flutter/gestures.dart';

List<Map<String, dynamic>> parseSentence(String sentence) {
  final regex = RegExp(r'<link>(.*?)</link>');
  List<Map<String, dynamic>> parts = [];
  int lastIndex = 0;

  for (Match match in regex.allMatches(sentence)) {
    // 添加链接前的普通文本
    if (match.start > lastIndex) {
      parts.add({
        'type': 'text',
        'content': sentence.substring(lastIndex, match.start)
      });
    }
    // 添加链接内容
    parts.add({
      'type': 'link',
      'content': match.group(1)!
    });
    lastIndex = match.end;
  }

  // 添加剩余的普通文本
  if (lastIndex < sentence.length) {
    parts.add({
      'type': 'text',
      'content': sentence.substring(lastIndex)
    });
  }

  return parts;
}

2. 修改ListView.builder代码 #

替换原来的Text组件为RichText，根据解析后的片段生成对应的文本和可点击区域：

ListView.builder(
  itemCount: book.sentence.length,
  itemBuilder: (context, index) {
    final sentenceParts = parseSentence(book.sentence[index].content.toString());
    return Container(
      padding: const EdgeInsets.symmetric(vertical: 8, horizontal: 16),
      child: RichText(
        text: TextSpan(
          // 继承默认文本样式
          style: DefaultTextStyle.of(context).style,
          children: sentenceParts.map((part) {
            if (part['type'] == 'link') {
              return TextSpan(
                text: part['content'],
                // 设置链接样式（蓝色下划线）
                style: const TextStyle(
                  color: Colors.blue,
                  decoration: TextDecoration.underline,
                ),
                // 添加点击事件
                recognizer: TapGestureRecognizer()
                  ..onTap = () {
                    // 这里替换成你的点击逻辑，比如弹窗、跳转页面等
                    print('点击链接：${part['content']}');
                  },
              );
            } else {
              // 普通文本使用默认样式
              return TextSpan(text: part['content']);
            }
          }).toList(),
        ),
      ),
    );
  },
)

关键说明 #

• 正则表达式<link>(.*?)</link>用于精准匹配标签内的链接内容，.*?是非贪婪匹配，避免多个链接时出现匹配错误。
• RichText和TextSpan允许在同一段文本中混合不同样式和交互逻辑，完美适配你的需求。
• TapGestureRecognizer负责处理链接的点击事件，你可以在onTap回调中实现自定义逻辑。

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