如何在 Flutter 中使某些文本可点击（响应点击）？

Question

假设我有这样的 Flutter 代码：

  // ...
  body: new Center(
    child: new Text(
      'Hello, I am some text',
    ),
  ),
  // ...

如何让屏幕上的文本响应点击？（例如，当我点击文本时简单地打印到日志。）

谢谢！

Answer 1

如此所示，您可以使用 InkWell 或手势检测器。

例如

InkWell(
    child: Text("Hello"),
    onTap: () {print("value of your text");},
)

或

var textValue = "Flutter"
InkWell(
    child: Text(textValue),
    onTap: () {print(textValue);},
)

EDIT ：正如 Collin Jackson 所建议的，您也可以使用 FlatButton

FlatButton(
  onPressed: () {print("Hello world");},
  child: Text("Hello world"),
);

如果您不需要或不需要 material（FlatButton、InkWell 等），您可以使用 GestureDetector:

GestureDetector(
  onTap: () { print("I was tapped!"); },
  child: Text("Hello world"),
)

Answer 2

您还可以使文本以 URL 的形式显示，如下所示：

new FlatButton(
  onPressed: () {print("You've tapped me!")},
  child: Text(
    "Tap me!", 
    style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline)),
);

Answer 3

另一种方法

创建 returns 可点击小部件的功能：

Widget tapableText(String text, Function onTap) {
  return GestureDetector(
    onTap: onTap,
    child: Text(text),
  );
}

用法示例：

...
child: tapableText('Hello', () { print('I have been tapped :)'); }),
...

Answer 4

您可以为可点击文本使用富文本格式：-

相应地划分 Text Span 中的文本，并在要使其可点击的文本中使用点击手势。

  TapGestureRecognizer _termsConditionRecognizer;
  TapGestureRecognizer _privacyPolicyRecognizer;

  @override
  void dispose() {
    _privacyPolicy.dispose();
    _termsCondition.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();
    _termsConditionRecognizer = TapGestureRecognizer()
      ..onTap = () {
        print("Terms and condition tapped");
      };
    _privacyPolicyRecognizer = TapGestureRecognizer()
      ..onTap = () {
        print("Provacy Policy tapped");
      };
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RichText(
          text: TextSpan(
            text: 'By signing up you agree to the ',
            children: [
              TextSpan(
                text: 'Terms And Condition',
                recognizer: _termsConditionRecognizer,
              ),
              TextSpan(
                text: ' and ',
              ),
              TextSpan(
                text: 'Privacy Policy',
                recognizer: _privacyPolicyRecognizer,
              ),
            ],
          ),
        ),
      ),
    );
  }

Answer 5

您可以使用这些方法

TextButton 并向其提供文本。
FlatButton 并提供您的文本，以删除您可以使用的额外填充 FlatButton 的 materialTapTargetSize 属性并提供 MaterialTapTargetSize.shrinkWrap 但 FlatButton 在新版本中已贬值。
InkWell 如上所述。

如何在 Flutter 中使某些文本可点击（响应点击）？

How do I make some text tappable (respond to taps) in Flutter?

dart

flutter