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

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

相关推荐
悟能不能悟41 分钟前
js闭包问题
开发语言·前端·javascript
秋秋_瑶瑶1 小时前
vue-amap组件呈现的效果图如何截图
前端·javascript·vue-amap
gnip2 小时前
js上下文
前端·javascript
中草药z2 小时前
【Stream API】高效简化集合处理
java·前端·javascript·stream·parallelstream·并行流
不知名raver(学python版)3 小时前
npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR!
前端·npm·node.js
醉方休3 小时前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel3 小时前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组3 小时前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽3 小时前
threejs入门学习日记
前端·javascript·three.js