如何控制Flutter中NestedScrollView的innerBoxIsScrolled触发偏移量？

要自定义innerBoxIsScrolled的触发时机，你需要放弃依赖NestedScrollView默认的状态判断，改为手动监听滚动偏移并自定义触发阈值，具体实现步骤如下：

1. 将原StatelessWidget改为StatefulWidget，用于维护自定义的滚动状态
2. 通过NotificationListener监听NestedScrollView的滚动事件
3. 计算触发阈值：当滚动偏移达到「展开高度 - AppBar最小高度」时，判定列表开始被遮挡
4. 使用自定义状态替代默认的innerBoxIsScrolled参数

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool _isInnerScrolled = false;
  final double _expandedHeight = 200.0;

  @override
  Widget build(BuildContext context) {
    // 获取当前主题的AppBar最小高度，兼容Material2/Material3
    final double toolbarHeight = Theme.of(context).appBarTheme.toolbarHeight ?? kToolbarHeight;
    // 计算触发阈值：滚动到AppBar完全折叠时，列表顶部刚好开始被遮挡
    final double triggerOffset = _expandedHeight - toolbarHeight;

    return Scaffold(
      body: NotificationListener<ScrollUpdateNotification>(
        onNotification: (notification) {
          final double currentOffset = notification.metrics.pixels;
          // 根据当前滚动偏移更新自定义状态
          setState(() {
            _isInnerScrolled = currentOffset >= triggerOffset;
          });
          return false; // 允许滚动事件继续传播
        },
        child: NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                title: _isInnerScrolled ? const Text('Updated title') : const Text('Initial title'),
                pinned: true,
                expandedHeight: _expandedHeight,
                forceElevated: _isInnerScrolled,
              ),
            ];
          },
          body: ListView.builder(
            padding: const EdgeInsets.all(8),
            itemCount: 30,
            itemBuilder: (BuildContext context, int index) {
              return SizedBox(
                height: 50,
                child: Center(child: Text('Item $index')),
              );
            },
          ),
        ),
      ),
    );
  }
}

原理说明 #

默认的innerBoxIsScrolled是基于内部列表的滚动偏移判断的——只有当AppBar完全折叠、内部列表开始滚动（pixels > 0）时，才会返回true，这就是你看到延迟触发的原因。

通过监听整个NestedScrollView的滚动偏移，我们可以在AppBar折叠到最小高度的瞬间（此时列表顶部刚好开始被遮挡）就触发状态变更，完全符合你的预期需求。

内容的提问来源于stack exchange，提问作者Fábio Ferreira