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控件了。无论点击名字的哪个部分,都会得到正确的输出,包括名字和点击位置信息。

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

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐7 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript