嗨，我是甜瓜看代码。

最近遇到个需求，要求当点击一个字符串中的名字时，能够输出相应的名字。例如，对于字符串"张三，李四，王五"，无论点击"张"、"三"、"张三"还是其他名字的位置，都能正确输出相应的名字。那么这个东西怎么实现呢？

实现思路

我们可以使用Flutter的RichText和GestureRecognizer来实现这个功能。首先，我们将字符串中的名字进行拆分，然后使用RichText和TextSpan来创建可点击的富文本。每个名字都将被封装在一个独立的TextSpan中，以便我们可以为每个名字添加点击事件处理。

dart 复制代码

List<TextSpan> textSpans = [];
for (String name in names) {
  textSpans.add(
    TextSpan(
      text: name == '王五'?name:'$name,',
      style: const TextStyle(color: Colors.blue, fontSize: 20),
      recognizer: TapGestureRecognizer()..onTapUp = (details) => _onTap(context, name, details),
    ),
  );

  if (name != names.last) {
    textSpans.add(TextSpan(text: '，'));
  }
}

在点击事件触发时，我们会获取点击的位置信息，并通过位置信息来判断点击的是哪个名字。

dart 复制代码

void _onTap(BuildContext context, String name, TapUpDetails details) {
  RenderBox? box = context.findRenderObject() as RenderBox?;
  final offset = box!.globalToLocal(details.globalPosition);
  ToastUtil.showToast(name);
  print('Clicked on $name at: ${offset.dx}, ${offset.dy}');
}

代码实现

定义一个ClickableNamesWidget，这将是我们要创建的控件。在这个控件中，我们将处理点击事件，并输出相应的名字和点击位置信息：

dart 复制代码

class ClickableNamesWidget extends StatelessWidget {
  //点击事件触发
  @override
  Widget build(BuildContext context) {
    final text = '张三，李四，王五';
    final names = text.split('，');
    //RichText拆分字符串部分
    return RichText(
      text: TextSpan(children: textSpans),
    );
  }
}

在上面的代码中，我们使用_onTap函数来处理点击事件。在这个函数中，我们获取点击位置的信息，并输出相应的名字和点击的坐标信息。

使用控件

在任何Flutter应用中，你可以将ClickableNamesWidget放置在你想要显示可点击名字的位置。当然也可以对其扩展，比如增加每个位置的内容所携带的信息等。

现在，你已经可以在你的Flutter应用中使用ClickableNamesWidget控件了。无论点击名字的哪个部分，都会得到正确的输出，包括名字和点击位置信息。

希望这篇文章对你有所帮助,这里是甜瓜看代码，期待你的关注。

Flutter创建根据位置输出内容的可点击文本Widget

实现思路

代码实现

使用控件