如何根据ListView项可见状态修改AppBar标题？嵌套SingleChildScrollView异常

inview_notifier_list 依赖自身滚动监听逻辑检测列表项可见性，当它被嵌套在 SingleChildScrollView 中时，会触发两个核心问题：

1. SingleChildScrollView 会拦截滚动事件，导致 inview_notifier_list 无法正确捕获滚动状态变化
2. 两个滚动容器的视口计算逻辑相互干扰，使得列表项的可见性判断出现偏差

方案1：移除 SingleChildScrollView，直接使用 inview_notifier_list 作为滚动容器 #

inview_notifier_list 本身就是可滚动组件，无需额外嵌套 SingleChildScrollView。如果页面有非列表的头部内容，可以通过组件自带的 header 属性添加：

InViewNotifierList(
  // 添加原SingleChildScrollView中的非列表内容
  header: Container(
    height: 200,
    child: const Text("页面头部内容"),
  ),
  itemCount: 20,
  builder: (context, index) {
    return InViewNotifierWidget(
      id: '$index',
      builder: (context, isInView, child) {
        // 检测到项可见时更新AppBar标题
        if (isInView) {
          setState(() {
            _currentAppBarTitle = "第${index+1}项";
          });
        }
        return Container(
          height: 150,
          alignment: Alignment.center,
          child: Text("列表项 $index"),
        );
      },
    );
  },
)

方案2：保留 SingleChildScrollView，手动实现可见性检测 #

如果必须保留嵌套结构，可以通过 ScrollController 监听滚动，结合 GlobalKey 计算列表项的视口位置来判断可见性：

final ScrollController _scrollController = ScrollController();
final List<GlobalKey> _itemKeys = List.generate(20, (index) => GlobalKey());
String _currentAppBarTitle = "初始标题";

@override
void initState() {
  super.initState();
  _scrollController.addListener(_checkItemVisibility);
}

void _checkItemVisibility() {
  final RenderObject? viewport = context.findRenderObject();
  if (viewport is RenderAbstractViewport) {
    final Rect viewportRect = viewport.paintBounds.shift(viewport.localToGlobal(Offset.zero));
    
    for (int i = 0; i < _itemKeys.length; i++) {
      final RenderBox? itemBox = _itemKeys[i].currentContext?.findRenderObject() as RenderBox?;
      if (itemBox == null) continue;
      
      final Offset itemOffset = itemBox.localToGlobal(Offset.zero);
      final Rect itemRect = itemBox.paintBounds.shift(itemOffset);
      
      // 判断列表项是否与视口有重叠（可见）
      if (viewportRect.overlaps(itemRect)) {
        setState(() {
          _currentAppBarTitle = "第${i+1}项";
        });
        // 只取第一个可见项，减少性能消耗
        break;
      }
    }
  }
}

@override
void dispose() {
  _scrollController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text(_currentAppBarTitle)),
    body: SingleChildScrollView(
      controller: _scrollController,
      child: Column(
        children: [
          // 非列表内容
          Container(height: 200, child: const Text("页面头部内容")),
          // 列表项
          ...List.generate(20, (index) {
            return Container(
              key: _itemKeys[index],
              height: 150,
              alignment: Alignment.center,
              child: Text("列表项 $index"),
            );
          }),
        ],
      ),
    ),
  );
}

• 方案2中如果列表项数量较多，遍历所有GlobalKey会有性能损耗，可优化为只检查当前可见区域附近的项
• 尽量避免嵌套滚动组件，这是Flutter中滚动冲突和状态检测异常的常见诱因

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