如何在 VisibilityDetector 中使用 TextSpan 作为 Widget答案

【问题标题】：How to use a TextSpan as a Widget inside VisibilityDetector如何在 VisibilityDetector 中使用 TextSpan 作为 Widget
【发布时间】：2021-12-01 13:30:30
【问题描述】：

我的应用中有文本，我希望随着时间的推移使用不同的颜色。我通过使用 RichText 小部件来做到这一点，每个字符都有一个单独的文本跨度和一个计时器，然后将更新状态并适当地重新绘制所有文本跨度。只要文本不太长，它就可以工作。它开始在大约 7-10k 个字符的文本中中断。

为了优化这一点，我决定使用 VisibilityDetector 库，因为不可见的文本不需要使用不同的颜色。因此，我将文本分块并将每个块放入其自己的可见性检测器中，当它不可见时，我只需使用 Text 小部件设置文本。这可行，但由于它们是单独的小部件，因此一行会在中途被切断并从下一行开始。

我想做的是将 TextSpan 作为 VisibilityDetector 的子项传递，但这会产生TextSpan is not a subtype of the type Widget 的错误。有什么办法可以做我想做的事吗？

这是我想要的小部件树的类型：

String myText = '';

RichText(
    text: TextSpan(
        children: myText.chunk().mapIndexed((chunkIndex, chunkText) {
            return WidgetSpan(
                child: VisibilityDetector(
                    onVisibilityChanged: (info) => _handleVisibilityChanged(),
                    child: !chunkIsVisible ? 
                        Text(chunkText) :
                        TextSpan( //This breaks because its not a subtype of Widget
                            children: chunkText.characters.mapIndexed((charIndex, char) {
                                return TextSpan(
                                    text: char,
                                    style: _styleTextBasedOnIndex((chunkIndex * ChunkSize) + charIndex)
                                )
                            }
                        )
                )
            )
        }
    )
)

【问题讨论】：

不可能：TextSpan 只能在 RichText / Text.rich 小部件内部使用

标签： flutter dart widget richtext textspan

【解决方案1】：

我认为你可以这样做来传递错误：

String myText = '';

RichText(
    text: TextSpan(
        children: myText.chunk().mapIndexed((chunkIndex, chunkText) {
            return WidgetSpan(
                child: VisibilityDetector(
                    onVisibilityChanged: (info) => _handleVisibilityChanged(),
                    child: !chunkIsVisible ? 
                        Text(chunkText) :
                        RichText(text: TextSpan( // Use another RichText
                            children: chunkText.characters.mapIndexed((charIndex, char) {
                                return TextSpan(
                                    text: char,
                                    style: _styleTextBasedOnIndex((chunkIndex * ChunkSize) + charIndex)
                                )
                            }
                        )
                   )
              )
            )
        }
    )
)

【讨论】：