Flutter如何监听CustomScrollView内Sliver位置实现Tab高亮切换

我的页面结构如下：

CustomScrollView(
     SliverToBoxAdapter(),
     SliverPersistentHeader(pinned:true, Row(children:[tab_A, tab_B ,tab_C])),
     SliverToBoxAdapter(A), // A SliverToBoxAdapter
     SliverToBoxAdapter(B), // B SliverToBoxAdapter
     SliverToBoxAdapter(C), // C SliverToBoxAdapter
)

需求：滚动CustomScrollView时，当A对应的SliverToBoxAdapter可见时，高亮tab_A；当B可见且A不可见时，高亮tab_B，以此类推。

我知道可以通过ScrollController监听滚动位置，但A、B、C的高度不确定，计算起来比较复杂，请问有没有其他实现方案？

不需要手动计算滚动位置和高度，用visibility_detector包可以直接监听每个Sliver内容的可见状态，步骤如下：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  visibility_detector: ^0.4.0+2

2. 给每个目标SliverToBoxAdapter包裹VisibilityDetector，通过监听可见性变化更新Tab高亮状态：

// 定义变量记录当前高亮的Tab索引
int _currentHighlightTab = 0;

CustomScrollView(
  slivers: [
    const SliverToBoxAdapter(child: SizedBox(height: 100)),
    SliverPersistentHeader(
      pinned: true,
      delegate: _PersistentHeaderDelegate(
        currentTab: _currentHighlightTab,
        onTabTap: (index) {
          // 可选：点击Tab滚动到对应内容区域
        },
      ),
    ),
    // 包裹A组件
    SliverToBoxAdapter(
      child: VisibilityDetector(
        key: const Key('tab_a_content'),
        onVisibilityChanged: (info) {
          // 当A的可见比例超过50%时，优先高亮tab_A
          if (info.visibleFraction > 0.5) {
            setState(() => _currentHighlightTab = 0);
          }
        },
        child: A(),
      ),
    ),
    // 包裹B组件
    SliverToBoxAdapter(
      child: VisibilityDetector(
        key: const Key('tab_b_content'),
        onVisibilityChanged: (info) {
          // 仅当A完全不可见，且B可见比例超过50%时，高亮tab_B
          if (info.visibleFraction > 0.5 && _currentHighlightTab != 0) {
            setState(() => _currentHighlightTab = 1);
          }
        },
        child: B(),
      ),
    ),
    // 包裹C组件
    SliverToBoxAdapter(
      child: VisibilityDetector(
        key: const Key('tab_c_content'),
        onVisibilityChanged: (info) {
          // 仅当A、B都不可见，且C可见比例超过50%时，高亮tab_C
          if (info.visibleFraction > 0.5 && _currentHighlightTab != 0 && _currentHighlightTab != 1) {
            setState(() => _currentHighlightTab = 2);
          }
        },
        child: C(),
      ),
    ),
  ],
);

// 自定义PersistentHeaderDelegate，根据当前高亮Tab渲染样式
class _PersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
  final int currentTab;
  final Function(int) onTabTap;

  _PersistentHeaderDelegate({required this.currentTab, required this.onTabTap});

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.white,
      child: Row(
        children: [
          GestureDetector(
            onTap: () => onTabTap(0),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                border: currentTab == 0 ? const Border(bottom: BorderSide(color: Colors.blue, width: 2)) : null,
              ),
              child: Text('Tab A', style: TextStyle(color: currentTab == 0 ? Colors.blue : Colors.grey)),
            ),
          ),
          GestureDetector(
            onTap: () => onTabTap(1),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                border: currentTab == 1 ? const Border(bottom: BorderSide(color: Colors.blue, width: 2)) : null,
              ),
              child: Text('Tab B', style: TextStyle(color: currentTab == 1 ? Colors.blue : Colors.grey)),
            ),
          ),
          GestureDetector(
            onTap: () => onTabTap(2),
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                border: currentTab == 2 ? const Border(bottom: BorderSide(color: Colors.blue, width: 2)) : null,
              ),
              child: Text('Tab C', style: TextStyle(color: currentTab == 2 ? Colors.blue : Colors.grey)),
            ),
          ),
        ],
      ),
    );
  }

  @override
  double get maxExtent => 50;

  @override
  double get minExtent => 50;

  @override
  bool shouldRebuild(covariant _PersistentHeaderDelegate oldDelegate) {
    return oldDelegate.currentTab != currentTab;
  }
}

3. 细节优化：如果需要更精准的优先级判断（比如A和B同时部分可见时，优先高亮位置更靠上的A），可以维护每个内容区域的可见状态变量，在滚动时按从上到下的优先级更新高亮Tab。另外，还可以结合Scrollable.ensureVisible实现点击Tab直接滚动到对应内容的交互。

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