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

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

相关推荐
光影少年4 小时前
angular生态及学习路线
前端·学习·angular.js
无尽夏_6 小时前
HTML5(前端基础)
前端·html·html5
Jagger_6 小时前
敏捷开发流程-精简版
前端·后端
FIN66687 小时前
昂瑞微冲刺科创板:创新驱动,引领射频芯片国产化新征程
前端·安全·前端框架·信息与通信·芯片
GISer_Jing7 小时前
ByteDance——jy真题
前端·javascript·面试
睡美人的小仙女1277 小时前
浏览器为何屏蔽本地文件路径?
前端
真的想不出名儿7 小时前
Vue 中 props 传递数据的坑
前端·javascript·vue.js
FIN66687 小时前
昂瑞微:深耕射频“芯”赛道以硬核实力冲刺科创板大门
前端·人工智能·科技·前端框架·信息与通信·智能
阳光阴郁大boy7 小时前
星座运势网站技术解析:从零打造现代化Web应用
前端·javascript
烛阴7 小时前
武装你的Python“工具箱”:盘点10个你必须熟练掌握的核心方法
前端·python