Flutter：如何在RichText中为TextSpan显示提示？

Question

我有一个很大的段落，其中许多单词需要有工具提示信息。当您点击其中任何一个单词时，工具提示信息应该出现。

我尝试使用包含许多TextSpan子项的RichText小部件，如下所示：

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

当我点击时，我希望显示提示文本。 我尝试使用小部件包装。

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

但这是不可能的，因为子元素必须仅为。有没有想法如何满足这个要求？

- Osama Na

---

显然，WidgetSpan应该能够帮助您解决这个问题。请查看此答案。 - Adrian Moisa

Answer 1

使用TextSpan，你有两种方法：使用或不使用children参数。

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

这是一个没有工具提示的复杂版本，但它可以处理对特定单词的点击：

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

这个的结果是以下内容：

- Mariano Zorrilla

---

谢谢您的建议。但对我来说并没有什么用，因为我的段落很长，有许多单词需要有工具提示信息，当您点击其中任何一个单词时，工具提示信息应该出现。 - Osama Na

我更新了我的回复。这不是一个工具提示，而是一种检测特定单词点击并显示任何你想要的东西的方法。我正在尝试看看这个单词是否可以附加到这个工具提示上。 - Mariano Zorrilla

在Github上有一个未解决的bug，可能会涉及到TextSpan的位置：https://github.com/flutter/flutter/issues/32137 - Mariano Zorrilla

你的更新回复很棒。非常感谢这个解决方案。 - Osama Na

Answer 2

您可以这样创建自定义的WidgetSpan：

class TooltipSpan extends WidgetSpan {
  TooltipSpan({
    @required String message,
    @required InlineSpan inlineSpan,
  }) : super(
          child: Tooltip(
            message: message,
            child: Text.rich(
              inlineSpan,
            ),
          ),
        );
}

并将您的 TextSpan 包装在其中：

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

- Mahdi Dahouei

Answer 3

我尝试做你需要的事情，但是由于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'),
                  ),
              ]
                ),
              ),

,

- Khalifa Alkhatri