传递ScrollController后CustomScrollView行为改变，如何兼顾SliverList自动滚动？

这个问题其实是因为NestedScrollView的滚动联动机制被手动设置的ScrollController打断了——当你给内部的CustomScrollView单独指定ScrollController时，它就不再和NestedScrollView的外层滚动系统（包括顶部的SliverAppBar）关联，自然就失去了折叠和联动滚动的能力。

我们可以通过获取NestedScrollView内置的内层滚动控制器来实现自动滚动，同时保留原有的滚动联动效果，具体步骤如下：

1. 添加GlobalKey获取NestedScrollView的状态 #

首先定义一个GlobalKey，用来获取NestedScrollView的内部状态，这样就能拿到它内置的内层滚动控制器：

final GlobalKey<NestedScrollViewState> _nestedScrollKey = GlobalKey();

2. 给NestedScrollView绑定这个Key #

在NestedScrollView的属性中添加这个key，方便后续获取它的状态：

NestedScrollView(
  key: _nestedScrollKey, // 绑定key
  headerSliverBuilder: ...,
  body: CustomScrollView(
    // 不要给CustomScrollView设置controller！
    slivers: [...],
  ),
)

3. 通过内层控制器实现自动滚动 #

在触发滚动的按钮点击事件中，通过GlobalKey拿到NestedScrollView的innerController，用它来执行滚动操作：

floatingActionButton: FloatingActionButton(
  onPressed: () {
    final innerController = _nestedScrollKey.currentState?.innerController;
    if (innerController != null) {
      innerController.animateTo(
        innerController.position.maxScrollExtent,
        curve: Curves.easeOut,
        duration: const Duration(seconds: 1),
      );
    }
  },
),

完整修改后的代码 #

class _MyHomePageState extends State<MyHomePage> {
  // 新增GlobalKey用于获取NestedScrollView的状态
  final GlobalKey<NestedScrollViewState> _nestedScrollKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 获取NestedScrollView内置的内层滚动控制器
          final innerController = _nestedScrollKey.currentState?.innerController;
          if (innerController != null) {
            innerController.animateTo(
              innerController.position.maxScrollExtent,
              curve: Curves.easeOut,
              duration: const Duration(seconds: 1),
            );
          }
        },
      ),
      body: NestedScrollView(
        key: _nestedScrollKey, // 绑定key
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: 230.0,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('SliverAppBar Expand'),
              ),
            )
          ];
        },
        body: CustomScrollView(
          // 移除手动设置的controller，让它使用NestedScrollView的内层控制器
          slivers: [
            //Some widgets are here
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  return Container(
                    height: 80,
                    color: Colors.primaries[index % Colors.primaries.length],
                    alignment: Alignment.center,
                    child: Text(
                      'Item : $index',
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

原理说明 #

NestedScrollView内部会自动创建一个innerController，专门用于控制body区域的滚动组件（也就是你的CustomScrollView）。通过GlobalKey获取这个内置控制器后，我们既可以实现自动滚动到底部的需求，又不会破坏NestedScrollView原本的滚动联动逻辑——顶部的SliverAppBar依然可以正常折叠，外层滚动也能正常工作。

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