在RichText中滚动到一个TextSpan

Question

问题是我有一个富文本(RichText)在可滚动的小部件中（SingleChildScrollView或ListView），我需要滚动到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的可滚动位置

- Mohammad Amir

---

我也遇到了同样的问题。 - mohammad

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

- Mohammad Amir

---

很棒的解决方案。我遇到了错误 Unhandled Exception: type 'Null' is not a subtype of type 'BuildContext'，我认为可能是由于无状态小部件（在无状态小部件中创建密钥，其中上下文不可访问）。有什么想法可以修复这个问题吗？ - Muhammad Qasim

@MuhammadQasim 这是你代码的一个特定问题，但如果我猜的话，可能是因为给出了错误的上下文。尝试跟踪一下你传递键的上下文。甚至可能是上下文被重写或者你删除了页面或以某种方式更改了它的上下文。 - Mohammad Amir

@MuhammadQasim，你的错误原因是你想要滚动的小部件没有被渲染（不在小部件树中）。 - Kerim Amanov