Flutter中如何为TextWidget指定文本添加点击交互？

因为Flutter的Text组件无法直接嵌入Widget，要实现局部文本可点击的需求，推荐使用RichText配合TextSpan和TapGestureRecognizer来完成，以下是具体实现方案：

核心思路 #

1. 将原始文本拆分为普通文本片段和需要点击的关键词片段
2. 对每个关键词片段绑定TapGestureRecognizer，点击时触发EasyLoading提示
3. 用RichText将所有TextSpan组合渲染，保持整体文本样式一致

完整实现代码 #

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  // 处理文本，拆分出普通文本和可点击关键词
  List<TextSpan> _buildTextSpans(String text, BuildContext context) {
    final List<TextSpan> spans = [];
    final words = Strings.words;
    final regex = RegExp('(${words.keys.join('|')})');
    final parts = text.split(regex);

    for (final part in parts) {
      if (words.containsKey(part)) {
        // 可点击的关键词
        spans.add(TextSpan(
          text: part,
          style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                color: Colors.blue,
                decoration: TextDecoration.underline,
              ),
          recognizer: TapGestureRecognizer()
            ..onTap = () {
              EasyLoading.showToast(words[part]!, dismissOnTap: true);
            },
        ));
      } else {
        // 普通文本
        spans.add(TextSpan(
          text: part,
          style: Theme.of(context).textTheme.bodyMedium,
        ));
      }
    }
    return spans;
  }

  @override
  Widget build(BuildContext context) {
    const content = """Eğer o razı olsa bütün dünya küsse ehemmiyeti yok. O razı olduktan ve kabul ettikten sonra, isterse ve hikmeti iktiza ederse sizler istemek talebinde olmadığınız halde, halklara da kabul ettirir, onları da razı eder. Onun için bu hizmette doğrudan doğruya yalnız Cenab-ı Hakk’ın rızasını esas maksat yapmak gerektir.""";

    return Scaffold(
      appBar: AppBar(title: const Text("Risale-i Nur")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              "İhlas Risalesi - 1. Düstur",
              style: Theme.of(context).textTheme.headlineLarge,
            ),
            const SizedBox(height: 16),
            RichText(
              text: TextSpan(children: _buildTextSpans(content, context)),
            ),
          ],
        ),
      ),
    );
  }
}

class Strings {
  static const Map<String, String> words = {
    "iktiza": "mecburiyet",
    "ehemmiyeti": "kıymeti",
    "tesir": "etki"
  };
}

关键说明 #

• 使用正则表达式拆分文本，自动匹配所有需要点击的关键词，无需手动拆分长文本
• 可点击关键词添加了蓝色下划线样式，让用户直观识别可交互文本
• 通过TapGestureRecognizer绑定点击事件，触发EasyLoading显示对应释义
• 保持了原有的文本主题样式，确保整体UI风格统一

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