Flutter中Custom Scroll View加控制器后Sliver App Bar浮动失效求助

问题原因 #

当你给NestedScrollView内部的CustomScrollView单独设置ScrollController时，会破坏NestedScrollView默认的滚动联动机制。NestedScrollView原本会让内部滚动组件和自身的滚动控制器同步，以此让SliverAppBar感知滚动状态来实现浮动效果。单独设置控制器后，这种同步关系被切断，导致SliverAppBar无法响应内部滚动，浮动功能失效。

解决方案 #

方案一：复用NestedScrollView的控制器（推荐） #

直接给NestedScrollView设置控制器，用它来实现返回顶部功能，不要给CustomScrollView单独配置控制器。这样滚动状态完全同步，SliverAppBar的浮动效果不受影响。

示例代码：

final ScrollController _scrollController = ScrollController();

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      controller: _scrollController,
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            floating: true,
            title: const Text("浮动标题栏"),
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://example.com/image.jpg", fit: BoxFit.cover),
            ),
          ),
        ];
      },
      body: CustomScrollView(
        // 此处不设置单独的controller
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text("列表项 $index")),
              childCount: 100,
            ),
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _scrollController.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
      },
      child: const Icon(Icons.arrow_upward),
    ),
  );
}

方案二：手动同步两个控制器的滚动状态 #

如果确实需要给CustomScrollView单独设置控制器，可以通过监听滚动事件，手动同步NestedScrollView和CustomScrollView的控制器状态，保证滚动联动。

示例代码：

final ScrollController _nestedController = ScrollController();
final ScrollController _customController = ScrollController();

@override
void initState() {
  super.initState();
  // 监听CustomScrollView滚动，同步到NestedScrollView
  _customController.addListener(_syncScrollPositions);
  // 监听NestedScrollView滚动，同步回CustomScrollView
  _nestedController.addListener(_syncScrollPositions);
}

void _syncScrollPositions() {
  if (_nestedController.hasClients && _customController.hasClients) {
    final nestedOffset = _nestedController.offset;
    final customOffset = _customController.offset;
    if (nestedOffset != customOffset) {
      // 避免循环触发，只同步差值
      if (nestedOffset > customOffset) {
        _customController.jumpTo(nestedOffset);
      } else {
        _nestedController.jumpTo(customOffset);
      }
    }
  }
}

@override
void dispose() {
  _nestedController.dispose();
  _customController.dispose();
  super.dispose();
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: NestedScrollView(
      controller: _nestedController,
      headerSliverBuilder: (context, innerBoxIsScrolled) {
        return [
          SliverAppBar(
            floating: true,
            title: const Text("浮动标题栏"),
            expandedHeight: 200,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.network("https://example.com/image.jpg", fit: BoxFit.cover),
            ),
          ),
        ];
      },
      body: CustomScrollView(
        controller: _customController,
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text("列表项 $index")),
              childCount: 100,
            ),
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        _customController.animateTo(
          0,
          duration: const Duration(milliseconds: 300),
          curve: Curves.easeInOut,
        );
      },
      child: const Icon(Icons.arrow_upward),
    ),
  );
}

注意事项 #

优先选择方案一，因为无需手动维护滚动同步，代码更简洁，也能避免出现滚动不同步的异常问题。方案二仅适用于必须给CustomScrollView单独配置控制器的场景。

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