在Flutter中如何使文本的特定部分可点击

Question

我想将文本的一部分变成可点击的，这样我可以在其上调用一个函数。同时，我也想控制可点击文本的样式。最好的情况是我还可以增大可点击区域的大小，例如42px。

我已经研究了flutter_linkify和linkify，但那不是我想要的。我想知道是否已经有一个包或甚至内置在flutter库中。

- julian.a

---

使用 https://pub.dev/packages/flutter_linkify 更加简单，看这里：https://dev59.com/nlQK5IYBdhLWcg3wXeuN#52395715 - Ely Dantas

Linkify 是一种不同的东西，因为它可以执行以下操作： "将文本中的 URL 和电子邮件转换为 Flutter 文本中可点击的行内链接。" - julian.a

Answer 1

使用RichText和TextSpan以及GestureRecognizer。使用GestureRecognizer可以检测轻击、双击、长按等手势。

Widget build(BuildContext context) {
    TextStyle defaultStyle = TextStyle(color: Colors.grey, fontSize: 20.0);
    TextStyle linkStyle = TextStyle(color: Colors.blue);
    return RichText(
      text: TextSpan(
        style: defaultStyle,
        children: <TextSpan>[
          TextSpan(text: 'By clicking Sign Up, you agree to our '),
          TextSpan(
              text: 'Terms of Service',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('Terms of Service"');
                }),
          TextSpan(text: ' and that you have read our '),
          TextSpan(
              text: 'Privacy Policy',
              style: linkStyle,
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  print('Privacy Policy"');
                }),
        ],
      ),
    );
  }

- Kirill Matrosov

---

非常好用！请注意，为了使其工作，您需要导入package:flutter/gestures.dart';。 - engelen

请问能否解释一下 .. 这个符号，我以前没见过。 - Mrak Vladar

"..符号a允许您调用特定方法，然后返回调用该方法的原始对象，通常用于希望以级联方式在同一对象上调用多个方法的情况。" - Piyush Vishwakarma

我从数据库中获取了一个字符串，例如 nice concept of help/support - https://support.google.com/firebase?authuser=0#topic=6399725，现在请告诉我如何在Flutter中将此字符串中的URL转换为链接？非常感谢。 - Kamlesh

虽然richtext没有遵循文本样式，但我在TextSpan和Text中使用了相同的TextStyle，它们看起来仍然不同（textspan使用较小的字体）。 - Kristi Jorgji

Answer 2

您可以使用 RichText 将一系列TextSpan 合并成一个文本。

    return RichText(
      text: TextSpan(
        text: 'Hello ',
        style: DefaultTextStyle.of(context).style,
        children: <TextSpan>[
          TextSpan(
              text: 'world!',
              style: TextStyle(fontWeight: FontWeight.bold)),
          TextSpan(
              text: ' click here!',
              recognizer: TapGestureRecognizer()
                ..onTap = () => print('click')),
        ],
      ),
    );

- haroldolivieri

---

在onTap前面的两个点是什么意思？ - user3808307

@user3808307 这是级联符号 - https://dart.dev/guides/language/language-tour#cascade-notation- 。它可以帮助你在同一个对象中做一串操作，并且返回基础对象的实例。因此，在这个例子中，我们正在实现TapGestureRecognizer的onTap()方法，但仍然将其实例返回到TextSpan的recognizer属性。 - haroldolivieri

喜欢展开运算符吗？ - user3808307

如果你在谈论JS的扩展运算符，它适用于可迭代对象，允许我们从数组中获取参数列表。所以不，那些是不同的东西。 - haroldolivieri

我从数据库中获取了一个字符串，例如 nice concept of help/support - https://support.google.com/firebase?authuser=0#topic=6399725，现在请告诉我如何在Flutter中将此字符串中的URL转换为链接？非常感谢。 - Kamlesh

嘿，@Kamlesh，恐怕我没有理解你的问题，请给我更多的上下文信息？ - haroldolivieri