滚动到RichText中的TextSpan

Question

问题是我在一个可滚动的小部件(SingleChildScrollView或ListView)中有一个RichText，我需要滚动到RichText中的一个特定的Widget。此外，我不能使用ScrollablePositionedList，因为文本应该写在最后一行的末尾，如果没有空格继续，文本应该转到下一行，所以我必须使用RichText。类似于示例代码：

ListView(
  children:[
    RichText(
      children: AListOfTextSpansThatICreateWithIndexes(),
    ),  
  ],
),

我想要显示的示例文本：

This is TextSpan1 and it is a bit 
long. This is TextSpan2 and its ok.

类似于Scrollable position of a TextSpan within a RichText

Answer 1

有一种方法可以使用Scrollable.ensureVisible方法确保键在屏幕上可见。(致谢给删除评论的人)

您应该首先为您的列表生成密钥：

var keys = List.generate(LENGTH, (i) => GlobalKey());

然后使用每个TextSpan后面的键：

Text.rich(
  TextSpan(
    children: Iterable.generate(LENGTH, (i) => i)
        .expand((i) => [
              WidgetSpan(
                child: SizedBox.fromSize(
                  size: Size.zero,
                  key: keys[i],
                ),
              ),
              TextSpan(
                text: 'this is text number $i',
              ),
            ])
        .toList(),
  ),
),

最后，调用此函数(可以访问上下文)滚动到所需的键：

Scrollable.ensureVisible(
   keys[i].currentContext,
   alignment: 0.2,
   duration: Duration(milliseconds: 500),
),