Flutter技术问题：如何在粘性头部列表中滚动到指定索引的子项？

问题原因 #

当列表项不在视口范围内时，Flutter不会对其进行渲染，此时通过GlobalKey获取对应的RenderBox会返回null，导致调用相关方法报错。

可行解决方案 #

1. 固定高度列表：直接用ScrollController计算偏移

如果你的列表项高度固定，这是最简单高效的方式：

final ScrollController _scrollController = ScrollController();
const double _itemHeight = 65; // 你的列表项固定高度

// 滚动到指定索引
void scrollToIndex(int targetIndex) {
  final double targetOffset = targetIndex * _itemHeight;
  _scrollController.animateTo(
    targetOffset,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
  );
}

// 在ListView中使用
ListView.builder(
  controller: _scrollController,
  itemExtent: _itemHeight, // 必须设置固定高度
  itemCount: yourItemList.length,
  itemBuilder: (context, index) => YourStickyListItem(index: index),
)

2. 动态高度/粘性头部场景：用Scrollable.ensureVisible

这个方法会自动触发目标项的渲染，再滚动到可见位置，完美适配CustomScrollView+SliverPersistentHeader的粘性头部结构：

// 维护一个全局key列表，对应每个列表项
final List<GlobalKey> _itemKeys = List.generate(yourItemList.length, (_) => GlobalKey());

// 滚动到指定索引
void scrollToIndex(int targetIndex) {
  Scrollable.ensureVisible(
    _itemKeys[targetIndex].currentContext!,
    duration: const Duration(milliseconds: 300),
    curve: Curves.easeInOut,
    alignment: 0.5, // 让目标项居中显示，可按需调整
  );
}

// 在CustomScrollView的SliverList中使用
CustomScrollView(
  slivers: [
    // 粘性头部
    SliverPersistentHeader(
      pinned: true,
      delegate: YourStickyHeaderDelegate(),
    ),
    // 列表内容
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) => YourListItem(
          key: _itemKeys[index],
          data: yourItemList[index],
        ),
        childCount: yourItemList.length,
      ),
    ),
  ],
)

3. 复杂场景：结合ItemPositionsListener做预滚动+精确调整

如果需要更精确的控制，比如目标项距离视口过远时先快速滚动到附近，再精细调整：

final ScrollController _scrollController = ScrollController();
final ItemPositionsListener _itemPositionsListener = ItemPositionsListener.create();
final List<GlobalKey> _itemKeys = List.generate(yourItemList.length, (_) => GlobalKey());

void scrollToIndex(int targetIndex) {
  final visiblePositions = _itemPositionsListener.itemPositions.value;
  if (visiblePositions.isEmpty) return;

  final firstVisibleIndex = visiblePositions.first.index;
  final lastVisibleIndex = visiblePositions.last.index;

  if (targetIndex < firstVisibleIndex || targetIndex > lastVisibleIndex) {
    // 先滚动到预估位置
    _scrollController.animateTo(
      targetIndex * 65, // 用预估高度快速定位
      duration: const Duration(milliseconds: 300),
      curve: Curves.fastOutSlowIn,
    );
    // 延迟后调用ensureVisible确保准确
    Future.delayed(const Duration(milliseconds: 350), () {
      Scrollable.ensureVisible(
        _itemKeys[targetIndex].currentContext!,
        duration: const Duration(milliseconds: 150),
        curve: Curves.easeInOut,
      );
    });
  } else {
    // 目标项已在视口，直接调整位置
    Scrollable.ensureVisible(
      _itemKeys[targetIndex].currentContext!,
      duration: const Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }
}

// 在ListView中使用
ListView.builder(
  controller: _scrollController,
  itemPositionsListener: _itemPositionsListener,
  itemCount: yourItemList.length,
  itemBuilder: (context, index) => YourListItem(
    key: _itemKeys[index],
    data: yourItemList[index],
  ),
)

内容的提问来源于stack exchange，提问作者paras