Флаттер: как отобразить всплывающую подсказку для TextSpan внутри RichText - PullRequest
Новая
       76

Флаттер: как отобразить всплывающую подсказку для TextSpan внутри RichText

1 голос
/ 24 февраля 2020

У меня большой абзац, и во многих словах должно быть сообщение во всплывающей подсказке, и когда вы нажимаете на любое из этих слов, должно появиться сообщение всплывающей подсказки.

Я пытался использовать виджет RichText, где он содержит много TextSpan детей, как показано ниже: 

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        TextSpan(text: "Flutter"),
        ... 
     ]),
),

Мне нужно отобразить текст всплывающей подсказки, когда я нажимаю TextSpan Я пытался обернуть TextSpan с Tooltip виджетом 

RichText(
  text: TextSpan(
     children: <TextSpan>[
        TextSpan(text: "Welcome to"),
        ...
        Tooltip(
            message: "any text here",
            child: TextSpan(text: "Flutter"),
        ),
        ...            
     ]),
),

но это невозможно, так как дети должны быть только TextSpan.

У кого-нибудь есть идеи о том, как выполнить это требование?

Ответы [ 2 ]

2 голосов
/ 24 февраля 2020

С TextSpan у вас есть 2 способа сделать это: с или без использования параметра children. 

Widget _toolTipSimple() {
    return Center(
      child: Tooltip(
        message: "Flutter",
        child: RichText(
          text: TextSpan(
              text: "Welcome to", style: TextStyle(fontSize: 70)),
        ),
      ),
   );
}

Это сложная версия без всплывающей подсказки , но обрабатывает щелчок по определенному c слову: 

Widget _snackBarTextSpanChildren(BuildContext context) {
    return Center(
      child: RichText(
        textAlign: TextAlign.center,
        text: TextSpan(
          children: [
            TextSpan(text: "Welcome to ", style: TextStyle(fontSize: 70)),
            TextSpan(
                text: "Flutter",
                style: TextStyle(fontSize: 70),
                recognizer: TapGestureRecognizer()..onTap = () {
                  Scaffold.of(context).showSnackBar(SnackBar(content: Text('Hello!')));
                }),
          ],
        ),
      ),
    );
  }

Результат для этого следующий:

Snackbar on specific word

0 голосов
/ 24 февраля 2020

Я пытался сделать то, что вам нужно, но не работал, так как SpanText работает только, но если вы проверите ниже код моей работы для вас:) 

Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: Column(
              // Column is also a layout widget. It takes a list of children and
              // arranges them vertically. By default, it sizes itself to fit its
              // children horizontally, and tries to be as tall as its parent.
              //
              // Invoke "debug painting" (press "p" in the console, choose the
              // "Toggle Debug Paint" action from the Flutter Inspector in Android
              // Studio, or the "Toggle Debug Paint" command in Visual Studio Code)
              // to see the wireframe for each widget.
              //
              // Column has various properties to control how it sizes itself and
              // how it positions its children. Here we use mainAxisAlignment to
              // center the children vertically; the main axis here is the vertical
              // axis because Columns are vertical (the cross axis would be
              // horizontal).
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                RichText(
                  text: TextSpan(
                      style: TextStyle(color: Colors.black),
                      children: <TextSpan>[
                        TextSpan(text: "Welcome to"),
                      ]),
                ),
                Tooltip(
                  message: 'any text here',
                  child: Text('Flutter'),
                  ),
              ]
                ),
              ),

,

...