滚动到 RichText 内的 TextSpan

Question

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

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

我想显示的示例文本：

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

类似于RichText 中 TextSpan 的可滚动位置

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),
),