web-dev-qa-db-ja.com

Flutter TextSpanでのジェスチャー検出

TextSpan内のどのWordがユーザーによってタッチされたかを検出する方法はありますか？

この段落は、私がより多くのものを書くことを主張しているスタックオーバーフローロボットを回避するためにここにあります:)

gestureflutter
19
adko

自分で上達できる

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'),
        )
      ]),
    );
37
Putra Ardiansyah

ほぼすべてのタイプのイベントを許可するrecognizerのTextSpanプロパティを使用できます。これが基本的な実装です。

import 'package:flutter/gestures.Dart';

//... Following goes in StatefulWidget subclass

TapGestureRecognizer _recognizer1;
DoubleTapGestureRecognizer _recognizer2;
LongPressGestureRecognizer _recognizer3;

@override
void initState() {
  super.initState();
  _recognizer1 = TapGestureRecognizer()
    ..onTap = () {
      print("tapped");
    };
  _recognizer2 = DoubleTapGestureRecognizer()
    ..onDoubleTap = () {
      print("double tapped");
    };
  _recognizer3 = LongPressGestureRecognizer()
    ..onLongPress = () {
      print("long pressed");
    };
}

@override
Widget build(BuildContext context) {
  var underlineStyle = TextStyle(decoration: TextDecoration.underline, color: Colors.black, fontSize: 16);

  return Scaffold(
    appBar: AppBar(title: Text("TextSpan")),
    body: RichText(
      text: TextSpan(
        text: 'This is going to be a text which has ',
        style: underlineStyle.copyWith(decoration: TextDecoration.none),
        children: <TextSpan>[
          TextSpan(text: 'single tap ', style: underlineStyle, recognizer: _recognizer1),
          TextSpan(text: 'along with '),
          TextSpan(text: 'double tap ', style: underlineStyle, recognizer: _recognizer2),
          TextSpan(text: 'and '),
          TextSpan(text: 'long press', style: underlineStyle, recognizer: _recognizer3),
        ],
      ),
    ),
  );
}

enter image description here

8
CopsOnRoad

文字列を反復処理して文字列の配列を取得し、それぞれに個別のテキストスパンを作成して、ジェスチャー認識機能を追加します

 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;
2
abubz