使文本的特定部分在颤动中可点击

jul*_*n.a 40 text clickable dart flutter

我想让文本的一部分可点击,以便我可以在其上调用函数。我也想控制可点击文本的样式。在最好的情况下,我还可以将可点击区域的大小增加到例如 42px。

在此处输入图片说明

我已经研究过 flutter_linkify 和 linkify,但这不是我想要的。我很好奇是否已经有一个包,甚至内置到 flutter 库中。

Kir*_*sov 97

RichTextTextSpanGestureRecognizer 一起使用。随着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"');
                }),
        ],
      ),
    );
  }
Run Code Online (Sandbox Code Playgroud)

在此处输入图片说明

  • 效果很好!请注意,您需要“import 'package:flutter/gestures.dart';”才能正常工作。 (5认同)
  • `..` 表示法允许你调用一个特定的方法,然后返回调用该方法的原始对象,通常当我们想要以级联方式在同一个对象上调用多个方法时使用 (4认同)

har*_*eri 18

您可以使用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')),
        ],
      ),
    );
Run Code Online (Sandbox Code Playgroud)

  • onTap前面的两个点是什么意思? (2认同)