Flutter/Dart：如何实现可变高度指定起始项列表并满足滚动状态需求？

已完成目标 #

• 基于ScrollablePositionedList实现列表从指定索引初始展示 ✅

待实现目标解决方法 #

2. 滚动时自动展开/收起SliverAppBar（替代手动NotificationListener） #

ScrollablePositionedList默认不会和NestedScrollView的inner滚动控制器联动，需将列表滚动事件同步到ExtendedNestedScrollView的inner controller，实现SliverAppBar自动展开/收起：

1. 给ExtendedNestedScrollView配置唯一的滚动位置标识：

ExtendedNestedScrollView(
  innerScrollPositionKeyBuilder: (index) => PageStorageKey('tab_$index'),
  headerSliverBuilder: (context, innerBoxIsScrolled) {
    return [SliverAppBar(/* 你的自定义配置 */)];
  },
  body: TabBarView(/* 标签页内容 */),
)

2. 在列表所在标签页中，关联两个滚动控制器的事件：

class _TabPageState extends State<TabPage> {
  final ItemScrollController _itemScrollController = ItemScrollController();
  ScrollController? _innerScrollController;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    // 获取ExtendedNestedScrollView的inner滚动控制器
    _innerScrollController = ExtendedNestedScrollViewInnerScrollPositionKeyWidget.of(context);
    
    // 同步列表滚动到inner控制器，触发SliverAppBar状态变化
    _itemScrollController.addListener(() {
      if (_innerScrollController != null) {
        _innerScrollController!.jumpTo(_itemScrollController.position.pixels);
      }
    });
    
    // 同步inner控制器滚动到列表（处理手动展开/收起SliverAppBar的情况）
    _innerScrollController?.addListener(() {
      if (_itemScrollController.position.pixels != _innerScrollController!.position.pixels) {
        _itemScrollController.jumpTo(_innerScrollController!.position.pixels);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return ScrollablePositionedList(
      itemScrollController: _itemScrollController,
      itemCount: itemList.length,
      itemBuilder: (context, index) => /* 你的可变高度子项 */,
    );
  }
}

3. 切换标签页时保持列表滚动位置 #

结合ExtendedNestedScrollView的缓存机制和PageStorage手动保存列表位置：

1. 在标签页State中添加位置存储变量：

int _currentIndex = 0;
double _currentOffset = 0.0;

2. 监听列表滚动，实时更新位置数据：

_itemScrollController.addListener(() {
  final position = _itemScrollController.position;
  _currentIndex = position.firstVisibleItemIndex ?? 0;
  _currentOffset = position.firstVisibleItemScrollOffset ?? 0.0;
});

3. 利用PageStorage保存/恢复位置：

@override
void initState() {
  super.initState();
  // 从缓存恢复位置
  final savedData = PageStorage.of(context)?.readState(context, identifier: PageStorageKey('tab_${widget.tabIndex}'));
  if (savedData != null) {
    _currentIndex = savedData['index'];
    _currentOffset = savedData['offset'];
    // 延迟恢复，确保列表已完成构建
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _itemScrollController.jumpTo(index: _currentIndex, offset: _currentOffset);
    });
  }
}

@override
void dispose() {
  // 保存位置到缓存
  PageStorage.of(context)?.writeState(
    context,
    {'index': _currentIndex, 'offset': _currentOffset},
    identifier: PageStorageKey('tab_${widget.tabIndex}'),
  );
  super.dispose();
}

4. 开启页面保活，避免标签页切换时重建：

class TabPage extends StatefulWidget {
  final int tabIndex;
  const TabPage({super.key, required this.tabIndex});

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用super.build
    return ScrollablePositionedList(/* ... */);
  }
}

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