Question

有没有办法检测用户触摸TextSpan中的哪个字？

本段是为了绕过堆栈溢出机器人，它坚持要我写更多东西:)

Answer 1

你可以自己改进

import 'package:flutter/gestures.dart';
...

new RichText(
      text: new TextSpan(text: 'Non touchable. ', children: [
        new TextSpan(
          text: 'Tap here.',
          recognizer: new TapGestureRecognizer()..onTap = () => print('Tap Here onTap'),
        )
      ]),
    );

Answer 2

遍历字符串以获取字符串数组，为每个字符串创建单独的文本范围并添加手势识别器

 List<TextSpan> createTextSpans(){
    final string = """Text seems like it should be so simple, but it really isn't.""";
    final arrayStrings = string.split(" ");
    List<TextSpan> arrayOfTextSpan = [];
    for (int index = 0; index < arrayStrings.length; index++){
      final text = arrayStrings[index] + " ";
      final span = TextSpan(
        text: text,
        recognizer: TapGestureRecognizer()..onTap = () => print("The word touched is $text")
      );
      arrayOfTextSpan.add(span);
    }
    return arrayOfTextSpan;

Answer 3

您可以使用Ìs Monday Important True Ìs Tuesday ImportantFalse Ìs Wednesday ImportantFalse Ìs Thursday ImportantTrue Ìs Friday ImportantFalse Ìs Saturday ImportantFalse Ìs Sunday ImportantTrue Monday False Tuesday False Wednesday False Thursday True Friday False Saturday False Sunday True的{{1}}属性，该属性几乎允许所有类型的事件。这是一个基本的实现。

recognizer

Answer 4

要做GestureRecognizer是他们的“使事物变得可轻敲”的目标。手势识别器，它将接收击中此Span的事件。

编写一个包含TextSpan和recognizer的简单小部件。

Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          RichText(
            textAlign: TextAlign.center,
            text: TextSpan(children: <InlineSpan>[
              TextSpan(
                  text: 'By signing up, you agree to our ',
                  style: TextStyle(color: Colors.black87)),
              TextSpan(
                  recognizer: TapGestureRecognizer()..onTap = () {
                    print('Terms and Conditions Single Tap');
                  },
                  text: 'Terms and Conditions',
                  style: TextStyle(
                      color: Colors.blueAccent,
                      fontWeight: FontWeight.bold)),
            ]),
          ),
          RichText(
            textAlign: TextAlign.center,
            text: TextSpan(children: <InlineSpan>[
              TextSpan(
                  text: 'Already have an account ',
                  style: TextStyle(color: Colors.black87)),
              TextSpan(
                  recognizer: DoubleTapGestureRecognizer()..onDoubleTap = () {
                    print('Contact Us Double Tap');
                  },
                  text: 'Contact Us',
                  style: TextStyle(
                      color: Colors.blueAccent,
                      fontWeight: FontWeight.bold)),
            ]),
          )
        ],
      ))

Flutter TextSpan中的手势检测

4 个答案: