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

发布于09月28日

我想让文本的一部分可点击，这样我就可以对其调用函数.另外，我想要有对可录入文本的样式的控制.在最好的情况下，我还可以将可点击区域的大小增加到例如42px.

个

我已经研究了fltter_linkify和linkify，但这不是我想要的.我很好奇是否已经有一个软件包，或者甚至已经内置到Flutter Flutter 库中了.

推荐答案

使用RichText搭配TextSpan和GestureRecognizer.使用GestureRecognizer可以检测tap、double tap、long press等.

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"');
                }),
        ],
      ),
    );
  }