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

嗨,我是甜瓜看代码

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

实现思路

我们可以使用Flutter的RichTextGestureRecognizer来实现这个功能。首先,我们将字符串中的名字进行拆分,然后使用RichTextTextSpan来创建可点击的富文本。每个名字都将被封装在一个独立的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控件了。无论点击名字的哪个部分,都会得到正确的输出,包括名字和点击位置信息。

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

相关推荐
范文杰27 分钟前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪35 分钟前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪44 分钟前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy1 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom2 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom2 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom2 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom2 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom2 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试
LaoZhangAI3 小时前
2025最全GPT-4o图像生成API指南:官方接口配置+15个实用提示词【保姆级教程】
前端